如何用css 繪製邊長相等且有邊框的六邊形

• 首先，個人思路是六邊形由一個長方形，兩個三角形拼成。
• css繪製有邊框的三角形，好比你的六邊形須要有白色的邊框，紅色的背景色，那麼你的三角形則有白色的大三角形和紅色的小三角形重疊在一塊兒，組成一個白色邊框的三角形。
• 以前用before ，after寫完無邊框的六邊形，寫有邊框的六邊形只好推翻這種方法從新寫了。。。
• 個人項目是幾個六邊形，不規則的擺放，須要定位，給六邊形添加hover效果。
• 最終，六邊形畫出來以後，PSD是1920的大小，算是高分辨率了，沒法自適應不一樣分辨率的屏幕，還得用rem,我用的是hotcss，不須要本身計算px與rem之間的轉換  實現了自適應，hotcss的使用詳情請點擊這個連接： 點擊打開連接。

實現效果：

html 代碼：

<div class="nav">
            <div class="hex-wrap clearfix hex-wrap1">
                <div class="hex-border-left hex-border-left1 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore1 pull-left"><a href="javascript: void(0);">農業大數據</a></div>
                <div class="hex-border-right hex-border-right1 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap2">
                <div class="hex-border-left hex-border-left2 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore2 pull-left"><a href="javascript: void(0);">物聯監管</a></div>
                <div class="hex-border-right hex-border-right2 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap3">
                <div class="hex-border-left hex-border-left3 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore3 pull-left"><a href="javascript: void(0);">畜牧</a></div>
                <div class="hex-border-right hex-border-right3 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap4">
                <div class="hex-border-left hex-border-left4 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore4 pull-left"><a href="javascript: void(0);">質量溯源</a></div>
                <div class="hex-border-right hex-border-right4 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap5">
                <div class="hex-border-left hex-border-left5 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore5 pull-left"><a href="javascript: void(0);">病蟲害監測</a></div>
                <div class="hex-border-right hex-border-right5 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>

            <div class="hex-wrap clearfix hex-wrap6">
                <div class="hex-border-left hex-border-left6 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore6 pull-left"><a href="javascript: void(0);">水產</a></div>
                <div class="hex-border-right hex-border-right6 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>
            <div class="hex-wrap clearfix hex-wrap7">
                <div class="hex-border-left hex-border-left7 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore7 pull-left"><a href="javascript: void(0);">休閒旅遊</a></div>
                <div class="hex-border-right hex-border-right7 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>
            <div class="hex-wrap clearfix hex-wrap8">
                <div class="hex-border-left hex-border-left8 pull-left">
                    <div class="hex-left"></div>
                </div>
                <div class="fore fore8 pull-left"><a href="javascript: void(0);">電子商務</a></div>
                <div class="hex-border-right hex-border-right8 pull-left">
                    <div class="hex-right"></div>
                </div>
            </div>
        </div>

css代碼：

/* 8個導航的樣式 */
.content .nav {
    float: right;
    width: 750px;
    position: relative;
}
.hex-wrap {
    position: absolute;
    cursor: pointer;
}

.hex-wrap1 {
    left: 170px;
    top: 0px;
}

.hex-wrap2 {
    left: 90px;
    top: 148px;
}

.hex-wrap3 {
    left: 0px;
    top: 296px;
}

.hex-wrap4 {
    left: 300px;
    top: 94px;
}

.hex-wrap5 {
    left: 215px;
    top: 242px;
}

.hex-wrap6 {
    left: 516px;
    top: 27px;
}

.hex-wrap7 {
    left: 435px;
    top: 175px;
}

.hex-wrap8 {
    left: 348px;
    top: 323px;
}

.fore {
    /*繪製一個寬80px,高136px 的長方形*/
    width: 80px;
    height: 136px;
    text-align: center;
    position: relative;
    font-size: 24px;
    border-top: 1px solid #dfe8f2;
    border-bottom: 1px solid #dfe8f2;
}

.hex-border-left {
    position: relative;
    content: "";
    width: 0;
    height: 0;
    border-top: 69px solid transparent;
    border-bottom: 69px solid transparent;
}

.hex-left {
    /*左邊的三角形*/
    content: "";
    width: 0;
    height: 0;
    border-top: 68px solid transparent;
    border-bottom: 68px solid transparent;
    position: absolute;
    left: 1px;
    top: -68px;
}

.hex-border-right {
    position: relative;
    content: "";
    width: 0;
    height: 0;
    border-top: 69px solid transparent;
    border-bottom: 69px solid transparent;
}

.hex-right {
    /*右邊的三角形*/
    content: "";
    width: 0;
    height: 0;
    border-top: 68px solid transparent;
    border-bottom: 68px solid transparent;
    position: absolute;
    right: 1px;
    top: -68px;
}

.fore a {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    position: absolute;
    white-space: nowrap;
    width: 150px;
    text-align: center;
    display: block;
    top: 50px;
    left: -35px;
    z-index: 99;
}

.hex-border-left {
    border-right: 41px solid #fff;

}

.hex-border-right {
    border-left: 41px solid #fff;
}

.fore1 {
    background-color: #3498db;
}

.hex-border-left1 .hex-left {
    border-right: 40px solid #3498db;

}

.hex-border-right1 .hex-right {
    border-left: 40px solid #3498db;

}

.fore2 {
    background-color: #1abc9c;
}

.hex-border-left2 .hex-left {
    border-right: 40px solid #1abc9c;

}

.hex-border-right2 .hex-right {
    border-left: 40px solid #1abc9c;

}

.fore3 {
    background-color: #f1c40f;
}

.hex-border-left3 .hex-left {
    border-right: 40px solid #f1c40f;

}

.hex-border-right3 .hex-right {
    border-left: 40px solid #f1c40f;

}

.fore4 {
    background-color: #9b59b6;
}

.hex-border-left4 .hex-left {
    border-right: 40px solid #9b59b6;

}

.hex-border-right4 .hex-right {
    border-left: 40px solid #9b59b6;

}

.fore5 {
    background-color: #95a5a6;
}

.hex-border-left5 .hex-left {
    border-right: 40px solid #95a5a6;

}

.hex-border-right5 .hex-right {
    border-left: 40px solid #95a5a6;

}

.fore6 {
    background-color: #e74c3c;
}

.hex-border-left6 .hex-left {
    border-right: 40px solid #e74c3c;

}

.hex-border-right6 .hex-right {
    border-left: 40px solid #e74c3c;

}

.fore7 {
    background-color: #2ecc71;
}

.hex-border-left7 .hex-left {
    border-right: 40px solid #2ecc71;

}

.hex-border-right7 .hex-right {
    border-left: 40px solid #2ecc71;

}

.fore8 {
    background-color: #e67e22;
}

.hex-border-left8 .hex-left {
    border-right: 40px solid #e67e22;

}

.hex-border-right8 .hex-right {
    border-left: 40px solid #e67e22;

}

.hex-wrap1:hover .fore1 {
    background-color: #39B0FF;
    border-top: 1px solid #39B0FF;
    border-bottom: 1px solid #39B0FF;
}

.hex-wrap1:hover .hex-border-left1 {
    border-right: 41px solid #39B0FF;
}

.hex-wrap1:hover .hex-border-right1 {
    border-left: 41px solid #39B0FF;
}

.hex-wrap1:hover .hex-left {
    border-right: 40px solid #39B0FF;
}

.hex-wrap1:hover .hex-right {
    border-left: 40px solid #39B0FF;
}