六边形块级元素的绘制

2019年9月14日 192次阅读 来源: sourcenode

使用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;
    }

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

    原文作者：sourcenode
    原文地址: https://segmentfault.com/a/1190000009802108
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞