用一个div画五角星 - 阿强爱分享

用一个div画五角星

作者: Aqiang

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

手机扫码查看

标签:

CSS代码

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

代码如下

  <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-9

本文标题: 用一个div画五角星

本文链接: https://iooqp.cn/?post=519

版权声明:文章为《 Aqiang》原创,转载请保留出处! 本文共有 641 个字!

分享到:

精彩评论

未显示?请点击刷新
切换注册

登录

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

切换登录

注册

© 2019 阿强爱分享   京ICP备19031919号-2

免责声明:本站所发布的资源信息及软件文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,本站信息来自网络,版权争议与本站无关。

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

支付宝扫一扫打赏

微信扫一扫打赏