纯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智障)。