五星红旗纯css代码实现

---

实现效果图：

---

五角星实现原理（三个三角形旋转相交）

1.外层设置一个div,让它的成为相对定位position:relative;

2.把里面每个div设置宽，高为0，再设置它的左右边框边框透明，上边框不透明，就形成了这样向下的三角形

3.再设置div的伪元素before和after和div的边框一样，且让它display:block;此时就和div一样成为一样向下的三角形。把2个伪元素和div本身都设置成绝对定位display:absolute;将伪元素的left设置成div的负宽度，将伪元素的top设置成div的负高度。再进行旋转

4.在进行旋转时，rotate和scale若要同时使用，必须得写在一起（transform：scale() rotate();），否则后面的会覆盖前面的