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