css-绘制十二角形

xyc

      咱们继续之前说的css实现图形的效果方法，今天来说说十二角形的实现方法。
      效果：
      
      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实现其他图形的样式方法。希望大家多多关注！

范范

支持支持