如何用css 绘制边长相等且有边框的六边形

• 首先，我的思路是六边形由一个长方形，两个三角形拼成。
• css绘制有边框的三角形，比如你的六边形需要有白色的边框，红色的背景色，那么你的三角形则有白色的大三角形和红色的小三角形重叠在一起，组成一个白色边框的三角形。
• 之前用before ，after写完无边框的六边形，写有边框的六边形只好推翻这种方法重新写了。。。
• 我的项目是几个六边形，不规则的摆放，需要定位，给六边形添加hover效果。
• 最终，六边形画出来之后，PSD是1920的大小，算是高分辨率了，无法自适应不同分辨率的屏幕，还得用rem,我用的是hotcss，不需要自己计算px与rem之间的转换  实现了自适应，hotcss的使用详情请点击这个链接： 点击打开链接。

实现效果：

html 代码：

        

            

                

                    

                
                
农业大数据
                

                    

                
            

            

                

                    

                
                
物联监管
                

                    

                
            

            

                

                    

                
                
畜牧
                

                    

                
            

            

                

                    

                
                
质量溯源
                

                    

                
            

            

                

                    

                
                
病虫害监测
                

                    

                
            

            

                

                    

                
                
水产
                

                    

                
            
            

                

                    

                
                
休闲旅游
                

                    

                
            
            

                

                    

                
                
电子商务
                

                    

                
            
        

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