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

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