css3.0+html绘制六边形

<section class="ass_desc">
            <section class="ass_descLeft posRe">
                <aside class="ass_descLeItem backW posAb"></aside>
                <aside class="ass_descLeItem backW posAb"></aside>
                <aside class="ass_descLeItem backW posAb"></aside>
            </section>
        </section>
.backW{background: #fff;}
.posRe{position: relative;}.posAb{position: absolute;}
.ass_desc{ 97%;height: 8.1rem;margin: 0 auto;}
.ass_descLeft{ 32.25%;height: 80%;padding-top: 1.2rem;}
.ass_descLeItem{ 3.46rem;height: 5.923rem;margin-left: 24%;}
.ass_descLeItem:nth-of-type(2){transform: rotate(60deg);-ms-transform: rotate(60deg);-moz-transform: rotate(60deg);-webkit-transform: rotate(60deg);}
.ass_descLeItem:nth-of-type(3){transform: rotate(120deg);-ms-transform: rotate(120deg);-moz-transform: rotate(120deg);-webkit-transform: rotate(120deg);}

原文地址:https://www.cnblogs.com/intelwisd/p/8404213.html