类介绍优点和原理1.先创建一个div2，然后给div设置边框。3.给div的四个边框设置不同的颜色4.修改宽高为05.剩下的角是透明的6.兼容IE6浏览器这样做的原因是：最简单的解决方法：（后面补充）其他解决方法：7.解决内联元素三角显示问题为什么会出现这个问题解决办法1.去除固定内容高度2.将内联元素转换为块级元素或内联块元素3.去除元素的标签（如果涉及一个特殊的布局，可以直接使用。）最后的代码扩展Angledtriangle有一个直角三角形箭头对话框兼容IE8的小圆角矩形使用css3旋转制作三角形图片、精灵图（网易）字体图标（京东）纯代码编写（亚马逊）这里主要介绍纯代码编写。优点代码中写的三角形，无论大小，都不会变形。代码运行速度比图片快。如果项目中没有引用字体图标，代码写的比较靠谱。原理是利用css盒子模型中的border属性
利用border属性可以实现三角形的图形效果，兼容性好。底层受边框样式插入/开始的影响。还是很受欢迎的，1.先创建一个div
网上查了下，如果IE6不支持透明，可以这样做：div{border:solid1pxtransparent;_边框颜色：番茄；_filter：色度（颜色=番茄）；所以我觉得这里可以用，但是我没有亲自测试过，如果有小可爱测试过，请告诉我^^。div{宽度：0px;高度：0px；边距：100px自动；边框宽度：10px；边框样式：实心；边框颜色：#f00透明透明透明；_border-color:#f00番茄番茄番茄;_filter:chroma(color=tomato);}如果是为了解决IE6的高度问题（也可以在前面加下划线表示兼容IE6）div{height:0;字体大小：0；行高：0；溢出：隐藏；}7。解决内联元素三角形显示问题为什么会存在这个问题？因为我们只是用
来制作三角形。当然，我们经常会使用或者伪元素来制作一些小图标。然后在显示上，可能会出现问题。下面的代码：可以看到页面是这样的：为什么会这样，那我们再仔细看看。它实际上看起来像这样。这样做的原因是内联元素本身有固定高度，宽高不能设置为0，所以top和bottom为50px没有问题，但是中间的距离拉长了，有是梯形效应。而如果上面没有块元素，则从内联元素的内容开始算起，所以上面的边框会在浏览器可见区域的上方。对此有多种解决方案：1.去除固定内容高度。使用字体大小：0；删除内容的固定高度。em{边框宽度：50px；边框颜色：透明透明透明#f40；边框样式：实心；font-size:0;}2.将行内元素转化为块级元素或行内块元素em{border-width:50px;边框颜色：透明透明透明#f40；边框样式：实心；显示：块；/*也可以是inline-block*/}3.去掉元素的label（如果涉及到特殊布局，可以直接使用）/*offlabel*/em{border-width:50px;border-color:transparenttransparenttransparent#f40;border-style:solid;position:absolute;top:0;left:0;}/*orfloat*/em{border-width:50px;border-style:transparenttransparenttransparent#f40;border-style:solid;float:left;}下面最后的代码是兼容IE6版本的三角形代码div{width:0px;/*设置宽高为0*/height:0px;/*你可以留空*/border-width:10px;/*该值控制三角形的大小和垂直位置*/border-color:#f00transparenttransparenttransparent;/*toprightbottomleft,transparent是透明的*/border-style:soliddasheddasheddashed;/*设置边框样式，dashed写法兼容IE6*/overflow:hidden;/*兼容IE6最小高度*/}不写成0改变border-width，和三角形变大而不变形。非常清楚。==三角形完成了。==延长直角三角形上面做出来的三角形都是45度的三角形，三角形的角度可以通过边框的高和宽来确定。比如这样的三角形，只需要保证上下左右的宽度不同即可。div{宽度：0px;高度：0px；边距：100px自动；边框宽度：10px30px；border-color:transparent透明透明红色;border-style:solid;}可以看到有一个直角的三角形，上三角和直角三角同时设置为一种颜色。将出现一个直角三角形。div{宽度：0;边框宽度：20px10px；边框样式：实心；border-color:redredtransparenttransparent;}箭头的原理其实很简单，就是两个三角形重叠。上面的三角形是背景的颜色.san{border-width:50px;边框颜色：透明透明透明#f40；边框样式：实心；位置：相对；}.si{边框宽度：30px；边框颜色：透明透明透明#fff；边框样式：实心；位置：绝对；左：-50px；top:-30px;}