css伪元素:before和:after，实现三角形

之前写过css伪类实现切三角形的方法，今天再复习一次，很多东西不用就会忘，所以还是经常使用或者回顾的好！

2021-05-18更新：更多形状在线查看：https://course.51qux.com/effect/css-shape

我们都知道三角的实现是根据border的边框来设置的，一个方向有填充色，另外几个方向变成透明色transparent ，就可以实现了，css及效果如下图

width:0;
border-top:40px solid red;
border-bottom:40px solid green;
border-left:40px solid blue;
border-right:40px solid yellow;

那么用before和after的实现方式一样，没有多大区别，例如：

p:before{
    display:block;
    content:'';
    width:0;
    border-width:15px 8px 8px 8px;
    border-style:solid; border-color:red transparent transparent transparent; position:absolute; left:60px;top:70px;
}

案例中，在伪类里面设置：块级、空内容、宽度为0，以及最重要的三角形的边框高度（上右下左的顺序，上案例中第一个为15px，高于其余边，所以效果如刚开始的红色三角一样，朝下的三角的角相对更尖锐）、边框属性solid，最后是边框色，对应的角填充颜色即可；

箭头朝向css的颜色，与填充色的反向相反哦，具体如下：

border-color:red transparent transparent transparent;/*下*/
border-color: transparent red transparent transparent;/*左*/
border-color: transparent transparent red transparent;/*上*/
border-color:transparent transparent transparent red ;/*右*/