css六边形

Html

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

CSS

.hexagon_box {
        margin-top: 70px;
        width: 208px;
        height: 120px;
        background: grey;
        position: relative;
    }
    .hexagon_box:before,
    .hexagon_box:after {
        content: '';
        border-left: 104px solid transparent;
        border-right: 104px solid transparent;
        position: absolute;
    }
    .hexagon_box:before {
        top: -59px;
        border-bottom: 60px solid grey;
    }
    .hexagon_box:after {
        bottom: -59px;
        border-top: 60px solid grey;
    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容