欢迎光临
我们一直在努力

用一个div画五角星

%title插图%num

代码如下

  <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>
赞(0)
未经允许不得转载:阿强爱分享 » 用一个div画五角星

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址