纯CSS制作空心三角形和实心三角形及其实现原理

　　　　在一次项目中需要使用到空心三角形，我瞬间懵逼了。查阅了一些资料加上自己的分析思考，终于是达到了效果，个人感觉制作三角形是使用频率很高的，因此记录下来，供以后查阅参考。达到了效果如图：　　

　　　　　　　　　　　　　　DOM结构如图：　　　　

　　　　　　CSS代码如下：

 1 /*  给矩形一个1px实心颜色rgb为#E4E4E2的边框  */
 2 .dynamicTime {
 3     width: 125px;
 4     height: 40px;
 5     border: 1px solid #E4E4E2;
 6     margin-left: 20px;
 7     position: relative;
 8         display: inline-block;
 9         vertical-align: middle;
10 }
11 /*    上下透明，右边框为10px   */
12 .dynamicTime:before {
13     content: '';
14     position: absolute;
15     top: 10px;
16     left: -10px;
17     width: 0;
18     height: 0;
19     border-right: 10px solid #E4E4E2;
20     border-bottom: 10px solid transparent;
21     border-top: 10px solid transparent; 
22 }
23 /*  上下透明，右边框为9px且在:before伪元素三角形的基础上，向右，下移动了1px  */
24 .dynamicTime:after {
25     content: '';
26     position: absolute;
27     top: 11px;
28     left: -9px;
29     width: 0;
30     height: 0;
31     border-bottom: 9px solid transparent;
32     border-right: 9px solid #fff;
33     border-top: 9px solid transparent; 
34 }

　　　　为便于写出方向向上下左右的空心三角形，我分别写出了各个方向的空心三角形，分析思考其中的实现原理。现总结如下：①空心三角原理：主要利用伪元素(:before,:after)实现， :before产生的是一个实心的#E4E4E2的三角形，而after产生的是实心的白色的三角形，将其覆盖。因此三角形线的粗细是由覆盖了多少决定的，即二者left,top的差值（特别注意：向左的空心三角形需要同时向右和下移，如上例子，向右的空心三角形需要同时向左和下移。向上的空心三角形只需要向下移就可以了，向下的空心三角形同理），border的四个方向的值大小只改变角度大小，不改变线的粗细。感兴趣的可以自己参考我的总结，自己动手测试，感受会更加深刻。

　　　　那么实心的三角形怎么做呢？其实实心三角形的CSS代码，只需将相应方向的三角形样式的after伪类删除，即可得到实心三角形.如我需要向左的实心三角形：

 1 .dynamicTime {
 2     width: 125px;
 3     height: 40px;
 4     border: 1px solid #E4E4E2;
 5     margin-left: 20px;
 6     position: relative;
 7 }
 8 .dynamicTime:before {
 9     content: '';
10     position: absolute;
11     top: 10px;
12     left: -10px;
13     width: 0;
14     height: 0;
15     border-right: 10px solid #E4E4E2;
16     border-bottom: 10px solid transparent;
17     border-top: 10px solid transparent; 
18 }

　　　　这样就OK了，是不是很简单。哈哈哈哈。。。。。。。（心理活动：MD智障）。