用border制作三角形

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 0;
height: 0;
/*boder-top 角向下 ,border-bottom 角向上*/
border-top: 20px solid red;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

css 尾巴的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  3. css伪类选择器及伪元素选择器

    1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...

  4. CSS常见问题及兼容性

    CSS常见问题 1 (IE6,7)H5标签兼容 解决方法1:(只显示核心代码) 1<script>  ; ; ;                    ;;;};;;;;;;;       ...

  5. 纯CSS实现各类气球泡泡对话框效果

    原文 纯CSS实现各类气球泡泡对话框效果 一.关于纯CSS实现气泡对话框 首先,来张大图: 上边这张黄黄的,大大的,圆圆的,有个小尾巴,文字内容有些YY的图片,就是使用纯CSS实现的气泡对话框效果,一 ...

  6. 深入理解css中vertical-align属性

    一.为什么要写这篇文章 今天看到一个问题: 两个div 都设置 display:inline-block,正常显示:但是在第二个div中加一个块级元素或者内联元素,显示就变了个样,为什么? <m ...

  7. 用CSS画小猪佩奇,你就是下一个社会人!

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 作者:江志耿 | 腾讯TEG网络工程师 我是佩奇,哼,这是我的弟弟乔治,呱呱,这是我的妈妈,嚯,这是我的爸爸,嚯~ 背景 小猪佩奇已经火了好 ...

  8. 《CSS世界》读书笔记(十五)

    <!-- <CSS世界>张鑫旭著 --> 字母x——CSS世界中隐匿的举足轻重的角色 在各种内联相关模型中,凡是涉及垂直方向的排版或者对齐的,都离不开最基本的基线(baseli ...

  9. 73.纯 CSS 创作一只卡通狐狸

    原文地址:https://segmentfault.com/a/1190000015566332 学习效果地址:https://scrimba.com/c/cz6EzdSd 感想:过渡效果,圆角,定位 ...

随机推荐

  1. 利用webstorm 快捷创建标签案例:

    利用webstorm 快捷创建标签案例: .wrapper>(.sWrapper>input[class='sText']+span[class= 'btn']*3)+.flWrapper ...

  2. template 的使用

    插件介绍:template 是一个高性能的JavaScript模板引擎. 插件特性: 1.性能卓越,执行速度快(mustache 与 tmpl 的20多倍): 2.支持运行时调试,可精准定位异常模板所 ...

  3. ArcGIS农村土地承包经营权辅助建库软件说明书

    软件作者:闫磊  电话:18987281928 或13108507190 QQ:853740877,QQ交流群:236352926 1.    软件安装... 4 2.           系统整体界 ...

  4. js解决千分符问题[收藏下]

    //js数字千分符处理 function commafy(num) { num = num + ""; var re = /(-?\d+)(\d{3})/ while (re.te ...

  5. win7 远程连接服务器出现身份验证错误,且找不到加密Oracle修正

    用远程桌面连接登录服务器,结果,弹出一个错误的提示框:发生身份验证错误,要求的函数不受支持. 然后在网上找了相关的教程,基本上所有的方法都是如下所示: 策略路径:"计算机配置"-& ...

  6. 线程Event事件

    事件(event) 事件是不同线程之间的同步对象 enent可以通过设置.等待.清除一个标识(flag),来进行线程间的控制 线程可以通过获取这个标志位(flag)的状态(设置或未设置)来控制线程 事 ...

  7. Mysql备份 -----innobackupex

    一,原理及介绍〇 xtrabackup能做哪些    对InnoDB引擎的表做热备    增量备份    流压缩传输到另外的服务器上    在线移动表    更简单的创建从库    备份时不增加服务器 ...

  8. Azure Linux 虚拟机常见导致无法远程的操作

    对Azure虚拟机的一些操作可能会导致无法远程连接,本文罗列了以下导致不能远程连接的场景: 场景1 - 在虚拟机配置IP地址或MAC地址 场景2 - 错误地修改服务的配置文件 场景3 - 误设置防火墙 ...

  9. 动态展开tableView的cell[1]

    动态展开tableView的cell[1] 源码地址:https://github.com/xerxes235/HVTableView 虽然作者写的demo很好看,可是,你很难理解他是怎么玩的-_-! ...

  10. 整合VIM和Graphviz,并且使用本办法实现实时预览

    在编程或是整理知识的时候一直苦于没有一款可以帮助理清思路的工具. 在网上苦寻良久,终于找到了一款可心可意的小软件 —— Graphviz. 折腾了一番,终于可以凑合着用了. 现将折腾的成果记录于此以作 ...