六边形块级元素的绘制

使用h5之前，都是利用图片作为背景来实现的，现在有h5+css3这把利器，顺利完美的绘制六边形。

绘制六边形

html代码：

<div class="shape-layer"></div>

可见html代码非常简单，这里要运用伪元素来实现

css代码：

.shape-layer {
    position:relative;
    width:336px;
    height:196px;
    background-color:#0174db;
    }
.shape-layer::before {
    content:"";
    position:absolute;
    left:0;
    top:-96px;
    width:0;
    height:0;
    border-left:transparent solid 168px;
    border-bottom:#0174db solid 96px;
    border-right:transparent solid 168px;
    }
.shape-layer::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-96px;
    width:0;
    height:0;
    border-left:transparent solid 168px;
    border-top:#0174db solid 96px;
    border-right:transparent solid 168px;
    }

看完这个案例，对于绘制三角形就简单了，尝试自己绘制一下吧。
本文为原创文章，转载请注明出处，多谢您的支持。