苏飞论坛

标题: css-绘制五角星 [打印本页]

---

作者: xyc    时间: 2021-6-25 16:21
标题: css-绘制五角星
   咱们继续之前说的css实现图形的效果方法，今天来说说五角星的实现方法。
   原理：使用transform属性来旋转不同的边来实现。

   效果：
    (, 下载次数: 4)

上传

点击文件名下载附件
   HTML：
   

[HTML] 纯文本查看 复制代码

<div class="div"></div>

   css样式：
   

[CSS] 纯文本查看 复制代码

.div {

             width: 0;

             height: 0;

             float: left;

             margin: 20px 20px;

             color: #ff0012;

             position: relative;

             display: block;

             border-right: 80px solid transparent;

             border-bottom: 60px solid #ff0012;

             border-left: 80px solid transparent;

             -moz-transform: rotate(35deg);

             -webkit-transform: rotate(35deg);

             -ms-transform: rotate(35deg);

             -o-transform: rotate(35deg);

           }

           .div:before {

             height: 0;

             width: 0;

             content: '';

             position: absolute;

             display: block;

             top: -35px;

             left: -50px;

             border-bottom: 60px solid #ff0012;

             border-left: 20px solid transparent;

             border-right: 20px solid transparent;

             -webkit-transform: rotate(-35deg);

             -moz-transform: rotate(-35deg);

             -ms-transform: rotate(-35deg);

             -o-transform: rotate(-35deg);

           }

           .div:after {

             width: 0;

             height: 0;

             content: '';

             position: absolute;

             display: block;

             top: 3px;

             left: -85px;

             color: #ff0012;

             border-right: 80px solid transparent;

             border-bottom: 60px solid #ff0012;

             border-left: 80px solid transparent;

             -webkit-transform: rotate(-70deg);

             -moz-transform: rotate(-70deg);

             -ms-transform: rotate(-70deg);

             -o-transform: rotate(-70deg);

           }

  以上就是五角星的实现效果，后面会继续给大家说说css实现其他图形的样式方法。希望大家多多关注！

---

欢迎光临 苏飞论坛 (http://www.sufeinet.com/)

Powered by Discuz! X3.4