css直角三角形怎么写 css创建三角形原理 _知识分享

原理
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;}

文章插图
【css直角三角形怎么写 css创建三角形原理】这样一个三角就完成了。那么问题来了，那就是兼容问题，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);}