用一个div画五角星

用一个div画五角星

代码如下

  <div id="star"></div>

CSS代码

  <style>
    #star {
      position: relative;
      margin: 200px auto;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 70px 100px;
      transform: rotate(35deg);
    }
    #star::before {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: -128px;
      left: -95px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 80px 30px;
      transform: rotate(-35deg);
    }
    #star::after {
      position: absolute;
      content: '';
      width: 0;
      height: 0;
      top: -45px;
      left: -140px;
      border-style: solid;
      border-color: transparent transparent red transparent;
      border-width: 70px 100px;
      transform: rotate(-70deg);
    }
  </style>
阿强爱分享
  • 本文由 发表于 2019年10月10日04:06:14
  • 转载请务必保留本文链接:https://iooqp.cn/519.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: