css3制做六边形代码（css3制做六边形代码怎么做）

今天给各位分享css3制做六边形代码的知识，其中也会对css3制做六边形代码怎么做进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、css3矩形到六边形的动画是如何实现的呢？
• 2、CSS3如何实现六边形按钮？
• 3、如何用css 绘制边长相等且有边框的六边形

css3矩形到六边形的动画是如何实现的呢？

css3矩形到六边形

.arrow{   

              display: inline-block;   

              width:0px;   

              height: 0px;   

              border-style: solid;   

              border-width: 100px; //与padding、margin属性类似，顺序为上、右、下、左   

              border-color: red blue orange gray;//顺序为上、右、下、左}

CSS3如何实现六边形按钮？

如果是手机的话 可以用css3写

画三个长方形 然后把其中的两个进行旋转

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

首先，我的思路是六边形由一个长方形，两个三角形拼成。

css绘制有边框的三角形，比如你的六边形需要有白色的边框，红色的背景色，那么你的三角形则有白色的大三角形和红色的小三角形重叠在一起，组成一个白色边框的三角形。

之前用before ，after写完无边框的六边形，写有边框的六边形只好推翻这种方法重新写了。。。

我的项目是几个六边形，不规则的摆放，需要定位，给六边形添加hover效果。

最终，六边形画出来之后，PSD是1920的大小，算是高分辨率了，无法自适应不同分辨率的屏幕，还得用rem,我用的是hotcss，不需要自己计算px与rem之间的转换  实现了自适应，hotcss的使用详情请点击这个链接： 点击打开链接。

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代码：

[css] view plain copy print?

/* 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;  

}

css3制做六边形代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于css3制做六边形代码怎么做、css3制做六边形代码的信息别忘了在本站进行查找喔。