10/30
2014
做三角形的要点：
1.div宽高必须为0；
2.边框颜色透明是透明，虽然看不到，但是不同于边框none哦；
3.line-height: 0;的设置是为了解决ie6空div有高度的bug；
4.ie6下设为透明的边框将显示为黑色...真是个可爱的小调皮~爆炸吧ie6!!!
好，接下来进入实战。以下皆为代码实现哦~
首先是向上的三角形，设置其底边框的可见样式，其他三条边框为透明。
为什么这样就能出来三角形了呢？我们把四条边框全部设为可见就明白了
我们给div加上宽高再看，才发现原来边框并非是我们所想的四个长条。如果把下面div的宽高归零，四条边框自然就有重合点——变成四个三角形了。
平时我们不知道这个事实，大概是因为我们经常把边框设置为同一种颜色的原因，那样当然就以为四条边就是四条直线拼一起了呢
明白了这个道理，我们可以随意调♂教这四条边了：
现在，不管是上下左右还是四个斜角，你还能说你不会吗？
上面的斜三角是用两个三角形拼起来的，因此看起来明显比较大。实际上可以用一个小三角的面积显示的，那就是随意挑选两个相邻的纵向边框和横向边框，将其中一个设为透明，一个设为可见色,另外两条边框设置为none就可以了。两条边框各占据了矩形的一半。
看下面的太极图，你能想到它是用圆角、定位、边框组合出来的吗？进阶地址
小技巧：
1.一般来说，做箭头的话，只要四个边框合起来是个矩形就ok了，所以每条边框的宽高分别为总宽高的一半。
2.像例子中的第一个三角形那样，我们如果不需要其对面（上面）的另一半边框，将那一面的边框宽度设置为0即可，不然的话，虽然看不见，可也是在占用宽高的哦~
3.适当的情况下使用缩写可减少css书写量，如例一的向上三角形，css可以这么写：
border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent #E8339B transparent;
最后附上我测试时的demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>纯css制作三角形</title>
</head>
<body>
<div id="test">
<p>首先是向上的三角形，设置其底边框的可见样式，其他三条边框颜色透明。</p>
<div id="a1"></div>
<p>为什么这样就能出来三角形了呢？我们把四条边框全部设为可见就明白了</p>
<div id="a2"></div>
<p>我们给div加上宽高再看，才发现原来边框并非是我们所想的四个长条，如果把下面div的宽高归零，四条边框自然就有重合点——变成四个三角形了。</p>
<div id="a3"></div>
<p>明白了这个道理，我们可以随意调教这四条边了：</p>
<div id="a4"></div>
<div id="a5"></div>
<p>不管是上下左右还是四个斜角，你还能说你不会吗？</p>
<p>进阶：上面的斜三角是用两个三角形拼起来的，因此看起来明显比较大。实际上可以用一个小三角的面积显示的，那就是随意挑选一个纵向边框和一个横向边框，将其中一个设为透明，一个设为可见色，另外两条边框设置为none就可以了。</p>
<div id="a6"></div>
<p>看下面的太极图，你能想到它是用圆角、定位、边框组合出来的吗？<a href="http://spion.blog.163</p>.com/blog/static/187244272201272791123671/" target="_blank">进阶地址</a>
<div id="a7"></div>
</div>
<style type="text/css">
body{text-align: center; font-family: '微软雅黑';}
#test div{width: 0;height: 0;line-height: 0;margin: 20px auto 0;}
#a1{border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent #E8339B transparent;}
#a2{border-bottom: 50px solid #E8339B;border-left: 50px solid #ACCE21;border-right: 50px solid #00A2EA;border-top: 50px solid #FF8200;}
#a3{width: 100px !important;height: 100px !important;border-bottom: 50px solid #E8339B;border-left: 50px solid #ACCE21;border-right: 50px solid #00A2EA;border-top: 50px solid #FF8200;}
#a4{border-bottom: 50px solid #E8339B;border-left: 50px solid #E8339B;border-right: 50px solid #00A2EA;border-top: 50px solid #00A2EA;}
#a5{border-bottom: 50px solid #E8339B;border-left: 50px solid transparent;border-right: 50px solid #E8339B;border-top: 50px solid transparent;}
#a6{border-style: solid;border-width: 50px; border-color: transparent #E8339B;border-bottom: none;border-left: none;}
#a7 { width: 96px !important; height: 48px !important; background: #fff; border-color: #E8339B; border-style: solid;
border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative; }
#a7:before { content: ""; position: absolute; top: 50%; left: 0; background: #fff;
border: 18px solid #E8339B; border-radius: 100%; width: 12px; height: 12px; }
#a7:after { content: ""; position: absolute; top: 50%; left: 50%; background: #E8339B;
border: 18px solid #fff; border-radius:100%; width: 12px; height: 12px; }
</style>
</body>
</html>
