苏飞论坛

标题: css-绘制十二角形 [打印本页]

---

作者: xyc    时间: 2021-7-16 17:13
标题: css-绘制十二角形
      咱们继续之前说的css实现图形的效果方法，今天来说说十二角形的实现方法。
      效果：
       (, 下载次数: 15)

上传

点击文件名下载附件
      HTML：
      

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

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

      css样式：
      

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

.div{

  width: 80px;

  height: 80px;

  margin: 20px 20px;

  float: left;

  background-color: #a8ff26;

  position: relative;

  text-align: center;

}

.div:before, .div:after{

  width: 80px;

  height: 80px;

  top: 0;

  left: 0;

  background-color: #a8ff26;

  position: absolute;

  content: "";

}

.div:before{

  transform:rotate(30deg);

  -webkit-transform:rotate(30deg);

  -ms-transform:rotate(30deg);

  -moz-transform:rotate(30deg);

  -o-transform:rotate(30deg);

}

.div:after{

  transform:rotate(60deg);

  -webkit-transform:rotate(60deg);

  -ms-transform:rotate(60deg);

  -moz-transform:rotate(60deg);

  -o-transform:rotate(60deg);

}

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

---

作者: 范范    时间: 2021-7-20 11:43
支持支持

---

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

Powered by Discuz! X3.4