CSS3实现五星红旗效果

五角星的实现原理:

  • 首先通过border属性实现一个倒三角形
  • 再使用伪元素::before 和::after,复制两个三角形
  • 把2个伪元素和div本身都设置成绝对定位,并将伪元素的left设置成div的负宽度,将伪元素的top设置成div的负高度。再进行旋转



    
    
    National Flag
    


    

显示效果:
CSS3实现五星红旗效果_第1张图片

你可能感兴趣的:(CSS3实现五星红旗效果)