css画六边形

六边形.png

 <div class="node_sty">
    <p>s</p>
    <h4>GATEWAY</h4>
    <P>1 instance</P>
    <p>1.0.8</p>
</div>

.node_sty{
    position: relative;
    width: 180px;
    height: 100px;
    margin: 50px 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;
}
.node_sty p,.node_sty h4{
    margin-bottom: 1.5%;
}