- 原理
- 1. 先创建一个div
- 2. 然后给div设定边框。
- 3. 给div的四个边框都设置不同的颜色
- 4. 把宽度和高度都变成0
- 5. 其余角为透明
- 6. 兼容IE6浏览器
- 造成这样的原因是：
- 最简单的解决办法：(后面添加)
- 其他的解决办法：
- 7. 解决内联元素的三角显示问题
- 为什么会有这个问题
- 解决办法
- 1. 去掉固定的内容高度
- 2. 将内联元素转化为块级元素或者行内块元素
- 3. 将元素脱标（如果涉及特殊的布局可以直接使用）
- 最终代码
- 扩展
- 有角度的三角
- 有一个角是直角的三角
- 箭头
- 对话框
- 兼容IE8的小圆角矩形
- 利用css3旋转来制作三角形
简介
三角的做法有好几种：
- 图片、精灵图（网易）
- 字体图标（京东）
- 纯代码写（亚马逊）
这里主要介绍的纯代码写的。
优点
- 代码写的三角，不管大小是多少，是不失真的。
- 代码运行比图片更快。
- 如果项目中没有引用字体图标，代码写是比较可靠的。
原理
原理就是使用css的盒模型中的border属性
使用border属性就可以实现一个兼容性很好的三角图形效果，其底层受到border-style的inseet/outset影响，边框3D效果在互联网早期还是很流行的，。
1. 先创建一个div
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. 把宽度和高度都变成0
div{ 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可以忽略下一步。
6. 兼容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. 解决内联元素的三角显示问题
为什么会有这个问题
因为我们刚才用
em{width: 0;height: 0;border-width: 50px;border-color: transparent transparent transparent #f40;border-style: solid;}可以看到页面是这个样子的:
为什么是这个样子的，那么我们再看的仔细一点。 它实际是这个样子的。
造成这样的原因
- 是因为行内元素自己有固定的高度，不能设置宽高为0，所以上面下面都是50px没有问题，但是中间撑开了距离，也就有了梯形的效果。
- 而且如果上面没有块元素的时候，是从内联元素的内容开始算起的，所以上面的border就会到浏览器可视区域的上面。
解决办法
这个有很多的办法：
1. 去掉固定的内容高度
使用font-size:0;可以去掉内容的固定高度。
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;}最终代码
下面就是兼容了IE6版本的三角代码。
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写的*/}改变border-width,三角变大，是不失真的。很清晰。
== 三角制作完成 。==
扩展
有角度的三角
上面制作的都是45度的三角，三角可以通过border的高度宽度确定角度。
比如这样一个三角，只需要确定上下的和左右的宽度不一样即可。
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;}箭头
其实原理也简单，就是两个三角重叠在一起。上面的三角就是背景的颜色
.san {border-width: 50px;border-color: transparent transparent transparent #f40;border-style: solid; position: relative;}.si {border-width: 30px;border-color: transparent transparent transparent #fff;border-style: solid; position: absolute;left: -50px;top: -30px;}对话框
这个使用伪元素去做就很方便。
div{width: 150px;padding: 10px;line-height: 20px;color: #9c623f;background-color: rgba(255, 236, 193, 0.72);border-radius: 10px;position: relative;}div::before{ content:\"\"; border-width: 10px; border-color:transparent rgba(255, 236, 193, 0.72) transparent transparent; border-style: solid; position: absolute; left: -20px; top: 10px;}早安，哈哈！今天天气不错，很好！本文内容由互联网用户自发贡献，该文观点仅代表作者本人。如发现本站有涉嫌抄袭侵权/违法违规的内容，请发送邮件至 5733401@qq.com 举报，一经查实，本站将立刻删除。本文链接：https://fajihao.com/i/255766.html
