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

网上某位大神用css制作空心三角形和实心三角形,甚觉牛逼,所以记录一下。

image.png
/*  给矩形一个1px实心颜色rgb为#E4E4E2的边框  */
.dynamicTime {
    width: 125px;
    height: 40px;
    border: 1px solid #E4E4E2;
    margin-left: 20px;
    position: relative;
        display: inline-block;
        vertical-align: middle;
}
/*    上下透明,右边框为10px   */
.dynamicTime:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -10px;
    width: 0;
    height: 0;
    border-right: 10px solid #E4E4E2;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent; 
}
/*  上下透明,右边框为9px且在:before伪元素三角形的基础上,向右,下移动了1px  */
.dynamicTime:after {
    content: '';
    position: absolute;
    top: 11px;
    left: -9px;
    width: 0;
    height: 0;
    border-bottom: 9px solid transparent;
    border-right: 9px solid #fff;
    border-top: 9px solid transparent; 
}

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

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

    width: 125px;
    height: 40px;
    border: 1px solid #E4E4E2;
    margin-left: 20px;
    position: relative;
}
.dynamicTime:before {
    content: '';
    position: absolute;
    top: 10px;
    left: -10px;
    width: 0;
    height: 0;
    border-right: 10px solid #E4E4E2;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent; 
}

果真是神人呀 ,走你~~~~

你可能感兴趣的:(纯CSS制作空心三角形和实心三角形及其实现原理)