css-绘制八角形

xyc

      咱们继续之前说的css实现图形的效果方法，今天来说说八角形的实现方法。
      效果：
      
      HTML：
      

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

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

      css样式：
      

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

.div {
 width: 80px;
 height: 80px;
 margin: 10px 10px;
 float: left;
 background-color: #cf7668;
 position: relative;
 transform:rotate(20deg);
 -webkit-transform:rotate(20deg);
 -ms-transform:rotate(20deg);
 -moz-transform:rotate(20deg);
 -o-transform:rotate(20deg);
}
.div:before{
 width: 80px;
 height: 80px;
 top: 0;
 left: 0;
 background-color: #cf7668;
 position: absolute;
 content: "";
 transform:rotate(135deg);
 -webkit-transform:rotate(135deg);
 -ms-transform:rotate(135deg);
 -moz-transform:rotate(135deg);
 -o-transform:rotate(135deg);
}

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

范范

支持ing