html之六边形

html

<div class="node_sty">
    <h4>六边</h4>
</div>

css

    .node_sty {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            width: 180px;
            height: 100px;
            margin: 100px auto;
            background: linear-gradient(#907CFF, #5E85FC);
            color: #fff;
            text-align: center;
        }

        .node_sty h4 {
            font-size: 20px;
        }

        .node_sty:before {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            bottom: 100px;
            border-width: 50px 90px;
            border-style: solid;
            border-color: transparent transparent #907CFF transparent
        }

        .node_sty:after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            top: 100px;
            border-width: 50px 90px;
            border-style: solid;
            border-color: #5E85FC transparent transparent transparent;
        }