div+css画六边形

效果图：

div:

<div class="iconBox">
        <div class="Icon">
            <div class="IconF">
                <div class="IconS">
                    <div class="IconT" style="background-color: #E8A316;">
                        <a id="daiban" onclick="skipCase(3);" class="IconUrl">5</a>
                    </div>
                </div>
            </div>
            <a onclick="skipCase(3);" class="IconCon">待办工单</a>
        </div>
        <div class="Icon">
            <div class="IconF">
                <div class="IconS">
                    <div class="IconT" style="background-color: #11ED94;">
                        <a id="paifa" onclick="skipCase(4);" class="IconUrl">8</a>
                    </div>
                </div>
            </div>
            <a onclick="skipCase(4);" class="IconCon">我的派发</a>
        </div>
        <div class="Icon">
            <div class="IconF">
                <div class="IconS">
                    <div class="IconT" style="background-color: #22A0DC;">
                        <a id="shangbao" onclick="skipCase(1);" class="IconUrl">9</a>
                    </div>
                </div>
            </div>
            <a onclick="skipCase(1);" class="IconCon">我的上报</a>
        </div>
        <div class="Icon">
            <div class="IconF">
                <div class="IconS">
                    <div class="IconT" style="background-color: #A0A0A0;">
                        <a id="lishi" onclick="skipCase(2);" class="IconUrl">10</a>
                    </div>
                </div>
            </div>
            <a onclick="skipCase(2);" class="IconCon">历史工单</a>
    </div>
</div>

css:

        .iconBox{
            width: 80%;
            margin: 0 auto;
        }
        .iconBox .Icon{
            float: left;
            width: 50%;
        }
        .iconBox .Icon .IconCon{
            display: block;
            height: 20px;
            width: 100%;
            text-align: center;
            line-height: 20px;
            color: #1385EB;
            cursor: pointer;
        }
        .IconF,.IconS,.IconT{
            width: 100px;
            height: 150px;
            overflow: hidden;
            margin: 0 auto;
        }
        .iconBox .IconF{            
            transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -webkit-transform: rotate(120deg);
        }
        .iconBox .IconS{
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
        }
        .iconBox .IconT{
            transform: rotate(-60deg);
            -ms-transform: rotate(-60deg);
            -moz-transform: rotate(-60deg);
            -webkit-transform: rotate(-60deg);
            background-color: rgba(0,0,0,0.6);
        }
        .iconBox .IconT .IconUrl{
            display: block;
            width: 100px;
            height: 150px;
            line-height: 150px;
            text-align: center;
            font-size: 30px;
            color: white;
        }