css实现正六边形

html

<div class='div'></div>

css

 　　　　.div {
            position: relative;
            width: 50px;
            height: 86.6px;
            margin: 50px auto;
            background-color: red;
        }
        .div:before {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            right:50px;
            border-width: 43.3px 25px;
            border-style: solid;
            border-color: transparent red transparent transparent;
        }
        .div:after {
            content: '';
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            left:50px;
            border-width: 43.3px 25px;
            border-style: solid;
            border-color: transparent transparent transparent red;
            top:0;
        }

显示