用一个div画五角星 - 爱优奇博客

用一个div画五角星

作者: 小君

全网最全的网络资源分享网站

手机扫码查看

标签:

网站代码

特别声明:文章多为网络转载,资源使用一般不提供任何帮助,特殊资源除外,如有侵权请联系!

68cc1570651689.jpg

 

代码如下

  <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>​
分享到:
打赏
未经允许不得转载:

作者: 小君, 转载或复制请以 超链接形式 并注明出处 爱优奇博客
原文地址: 《用一个div画五角星》 发布于2019-10-18

评论

未显示?请点击刷新
  1. #1
    籽言籽语 游客 Lv.2

    追梦互联:http://idc.wywgw.xyz
    追梦论坛:http://bbs.wywgw.cn
    追梦导航网:http://wywgw.cn
    追梦路过

切换注册

登录

忘记密码?

您也可以使用第三方帐号快捷登录

切换登录

注册

 

用一个div画五角星

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏