摘要：而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的就会到浏览器可视区域的上面。
目录
简介
优点
原理
1. 先创建一个div
2. 然后给div设定边框。
3. 给div的四个边框都设置不同的颜色
4. 把宽度和高度都变成0
5. 其余角为透明
6. 兼容IE6浏览器
造成这样的原因是：
最简单的解决办法：(后面添加)
其他的解决办法：
7. 解决内联元素的三角显示问题
为什么会有这个问题
解决办法
1. 去掉固定的内容高度
2. 将内联元素转化为块级元素或者行内块元素
3. 将元素脱标（如果涉及特殊的布局可以直接使用）
最终代码
扩展
有角度的三角
有一个角是直角的三角
箭头
对话框
兼容IE8的小圆角矩形
利用css3旋转来制作三角形
简介三角的做法有好几种：
图片、精灵图（网易）
字体图标（京东）
纯代码写（亚马逊）
这里主要介绍的纯代码写的。
优点代码写的三角，不管大小是多少，是不失真的。
代码运行比图片更快。
如果项目中没有引用字体图标，代码写是比较可靠的。
原理原理就是使用css的盒模型中的border属性1. 先创建一个div
使用border属性就可以实现一个兼容性很好的三角图形效果，其底层受到border-style的inseet/outset影响，边框3D效果在互联网早期还是很流行的，。
2. 然后给div设定边框。
div{
width:200px;
height:100px;
border:10px solid red;
}
可以看到效果：
3. 给div的四个边框都设置不同的颜色div{
width:200px;
height:100px;
border-left:10px solid red;
border-top:10px solid green;
border-right:10px solid blue;
border-bottom:10px solid yellow;
}
可以看到以下效果：
可以看到两个border交叉的地方，有斜边存在。
4. 把宽度和高度都变成0div{
width:0px;
height:0px;
border-left:10px solid red;
border-top:10px solid green;
border-right:10px solid blue;
border-bottom:10px solid yellow;
}
/*也可以这么写*/
div{
width:0px;
height:0px;
border:10px solid;
border-color:red green blue yellow;
}
可以看到以下效果：
这个时候就看得很明显了，出现了四个三角。那如果要出现一个，那么就将其他的三个弄成透明色就可以了。
这个就是三角形的由来。
5. 其余角为透明这里的设置也遵循 上右下左 的顺序，把不需要的角弄成透明色。
div{
width:0px;
height:0px;
border-width:10px;
border-color:#f00 transparent transparent transparent;
border-style:solid;
}
/*也可以再进行合并*/
div{
width:0px;
height:0px;
border:10px solid;
border-color:#f00 transparent transparent transparent;
}
这样一个三角就完成了。
那么问题来了，那就是兼容问题，IE6的兼容问题，如果不要求兼容IE6可以忽略下一步。
同样的一个三角，在IE6的显示是什么呢？
造成这样的原因是：IE6不支持border的transparent
IE6的高度最小为19px，不支持高度为0
在IE6下面，如果想把元素例如div设置成19像素以下的高度就设置不了了。这是因为IE6浏览器里面有个默认的高度，IE6下这个问题是因为默认的行高造成的。最简单的解决办法：(后面添加)
div{
/*不支持transparent*/
border-style:solid dashed dashed dashed;
/*高度最小不为0*/
overflow:hidden;
}
其他的解决办法：查了查网上的，如果是IE6不支持transparent,
可以这么做：
div{
border:solid 1px transparent;
_border-color:tomato;
_filter:chroma(color=tomato);
}
所以我觉得用在这里也可以，BUT没有亲测过，如果哪位小可爱测过可以请告知我^ ^。
div{
width:0px;
height:0px;
margin:100px auto;
border-width:10px;
border-style:solid;
border-color:#f00 transparent transparent transparent;
_border-color:#f00 tomato tomato tomato;
_filter:chroma(color=tomato);
}
如果是解决IE6的高度问题(也可以前面加下划线，表示兼容的IE6)
div{
height:0;
font-size:0;
line-height:0;
overflow:hidden;
}
7. 解决内联元素的三角显示问题
为什么会有这个问题
因为我们刚才用 可以看到页面是这个样子的: 为什么是这个样子的，那么我们再看的仔细一点。 造成这样的原因 是因为行内元素自己有固定的高度，不能设置宽高为0，所以上面下面都是50px没有问题，但是中间撑开了距离，也就有了梯形的效果。 而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的border就会到浏览器可视区域的上面。 这个有很多的办法： 使用font-size:0;可以去掉内容的固定高度。 下面就是兼容了IE6版本的三角代码。 改变border-width,三角变大，是不失真的。很清晰。 ==三角制作完成。== 上面制作的都是45度的三角，三角可以通过border的高度宽度确定角度。 比如这样一个三角，只需要确定上下的和左右的宽度不一样即可。 观察可以看到，是上面和右面的三角同时设置成一个颜色。就会出现直角的三角。 其实原理也简单，就是两个三角重叠在一起。上面的三角就是背景的颜色 这个使用伪元素去做就很方便。 原理就是一个矩形，上面和下面使用伪元素设置。 before是方向朝上的梯形，after是方向朝下的梯形。 注意不要太宽了，否则会变成切边矩形，这样就可以避免border-radius的兼容问题 如果可以用到css3，也可以使用到transform的rotate属性 大概原理图就是： 最终效果图是： @version1.0——2018-11-8——创建《CSS三角的写法（兼容IE6）》 ©burning_韵七七 文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。 转载请注明本文地址：https://www.ucloud.cn/yun/114184.html去制作三角，当然我们经常会使用或者伪元素去做一些小图标。那么在显示上面，可能会有问题。
下面的代码：
它实际是这个样子的。
解决办法
1. 去掉固定的内容高度
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
font-size: 0;
}
2. 将内联元素转化为块级元素或者行内块元素
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
display: block; /*也可以是inline-block*/
}
3. 将元素脱标（如果涉及特殊的布局可以直接使用）
/*脱标*/
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
position: absolute;
top:0;
left:0;
}
/*or 浮动*/
em{
border-width: 50px;
border-color: transparent transparent transparent #f40;
border-style: solid;
float:left;
}
最终代码
div{
width:0px; /*设置宽高为0*/
height:0px;/*可不写*/
border-width:10px; /*数值控制三角的大小，垂直的位置*/
border-color:#f00 transparent transparent transparent;/*上右下左，transparent是透明的*/
border-style:solid dashed dashed dashed;/*设置边框样式，dashed是兼容IE6写的*/
overflow:hidden;/*兼容IE6最小高度不为0写的*/
}
div{
width: 0px;
height: 0px;
margin: 100px auto;
border-width:10px 30px;
border-color:transparent transparent transparent red;
border-style:solid;
}
有一个角是直角的三角
div{
width: 0;
border-width: 20px 10px;
border-style: solid;
border-color: red red transparent transparent;
}
箭头
对话框
兼容IE8的小圆角矩形
早安，哈哈！今天天气不错，很好！
利用css3旋转来制作三角形
将里面的旋转45度，外面的overflow:hidden即可
摘要：而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的就会到浏览器可视区域的上面。 目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样的原因是： 最简单的解决办法：(后面添加) 其他的解决办法： 7. 解决...
摘要：而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的就会到浏览器可视区域的上面。 目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样的原因是： 最简单的解决办法：(后面添加) 其他的解决办法： 7. 解决...
摘要：而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的就会到浏览器可视区域的上面。 目录 简介 优点 原理 1. 先创建一个div 2. 然后给div设定边框。 3. 给div的四个边框都设置不同的颜色 4. 把宽度和高度都变成0 5. 其余角为透明 6. 兼容IE6浏览器 造成这样的原因是： 最简单的解决办法：(后面添加) 其他的解决办法： 7. 解决...
摘要：参考了天猫微博等网站的做法，用纯和实现，效果还是不错的。宋体三角形圆形提示盒子用做的提示盒子，上三角是纯，盒子圆角用到用做的提示盒子，上三角是纯，盒子圆角用到 参考了天猫、微博等网站的做法，用纯html和css实现，效果还是不错的。 以下是成果，兼容主流浏览器，包括ie6。 showImg(http://dtop.powereasy.net/UploadFiles/Article/2...
摘要：基本原理大同小异，这里主要介绍利用当然还可以使用的旋转技术实现，由于兼容性问题这里不涉及了。利用是一种常用而且简单兼容的方式 在当前流行的的网站上，我们经常会看到一些小三角形的下拉提示（微博顶部的下拉菜单），简单的方式可以使用一张图片代替，但是随着前端技术的发展，以及开发者对于前端性能的吹毛求疵，越来越多的前端开发者开始返璞归真，在能不使用图片的场景中减少图片使用，css图标相对于图片...
阅读 547·2019-08-30 15:55
阅读 1265·2019-08-30 13:55
阅读 1873·2019-08-29 17:13
阅读 2722·2019-08-29 15:42
阅读 1190·2019-08-26 14:04
阅读 915·2019-08-26 13:31
阅读 3164·2019-08-26 11:34
阅读 706·2019-08-23 18:25
