css-绘制八边形

xyc

     咱们继续之前说的css实现图形的效果方法，今天来说说八边形的实现方法。
     原理：在长方形上面和下面各放置一个梯形。
     效果：
     
     html：
     

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

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

     css样式：
     

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

   .div{
    width: 100px;
    height: 100px;
    float: left;
    margin: 10px 10px;
    background-color: #66e006;
    position: relative;
   }
   .div:before{
    width: 42px;
    height: 0;
    top: 0;
    left: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
    border-bottom: 29px solid #66e006;
   }
   .div:after{
    width: 42px;
    height: 0;
    left: 0;
    bottom: 0;
    position: absolute;
    content: "";
    border-left: 29px solid #ffffff;
    border-right: 29px solid #ffffff;
    border-top: 29px solid #66e006;
   }

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

范范

支持下