用css寫六邊形

div佈局

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

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

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

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