用DIV+CSS实现六边形

1 自己硬拼起来的(transform属性)
CSS

.box1{
            width: 58px;
            height: 96px;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            transform: rotate(60deg);
            margin-left: 60px;
        }

        .box3{
            width: 58px;
            height: 96px;
            border-top: 1px solid  black;
            border-bottom: 1px solid  black;
            transform: rotate(-60deg);
            margin-left: 60px;
            margin-top: -98px;
            float: left;
        }
        .box2{
            width: 57px;
            height: 98px;
            border-top: 1px solid black;
            border-bottom: 1px solid black;
            margin-top: -99px;
            margin-left: 60px;
        }

DIV

<div class="box1"></div>
<div class="box3"></div>
<div class="box2"></div>

结果

2 transparent属性
CSS

.box1{
            width:0;
            border-right: 30px solid red;
            border-top: 52px solid transparent;
            border-bottom: 52px solid transparent;
            float: left;
        }
        .box2{
            width: 60px;
            height: 104px;
            background-color: red;
            float: left;
        }
        .box3{
            width:0;
            border-left: 30px solid red;
            border-top: 52px solid transparent;
            border-bottom: 52px solid transparent;
            float: left;
        }

DIV

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

结果