如何使用纯CSS3创建一个简单的五角星图形

先说方法步骤：

1. 首先创建一个三角形，使用带大尺寸边线而零内容尺寸的元素来实现。

2. 使用伪元素:after和:before来克隆2个同样大小的三角形。

3. 在上面所说的2个伪元素上分别应用不同的旋转变换来达到五角星效果。

   代码如下：

.tri {  

    width: 0;  

  height: 0;  

    border-left: 15px solid transparent;  

    border-right: 15px solid transparent;  

    border-bottom: 30px solid red;  

}  

.tri:after,.tri:before {  

    width: 0;  

    height: 0;  

    border-left: 15px solid transparent;  

    border-right: 15px solid transparent;  

    border-bottom: 30px solid red;  

} 

.tri:before {  

    transform: rotate(70deg);  

}  

.tri:after {  

    transform: rotate(-70deg);  

}