css3实现六边形代码（html六边形代码）

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

本文目录一览：

• 1、css3矩形到六边形的动画是如何实现的呢？
• 2、如何用css 绘制边长相等且有边框的六边形
• 3、CSS3知识汇总16：clip-path
• 4、绘制五边形和六边形
• 5、CSS3如何实现六边形按钮？

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

css3矩形到六边形

.arrow{   

              display: inline-block;   

              width:0px;   

              height: 0px;   

              border-style: solid;   

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

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

如何用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知识汇总16：clip-path

2021年2月19日学习笔记

【椭圆】

【半椭圆】

沿纵轴对称，如果传4个值，分别从左上角开始以顺时针应用到各个拐角，如果提供3个值，意味着第4个值与第2个值相同

4个角还可以有不同的水平和垂直半径，在斜杠前指定1~4个值，在斜杠后指定1~4个值

当border-radius: 10px / 5px 20px时，相当于

border-radius: 10px 10px 10px 10px / 5px 20px 5px 20px;

【四分之一椭圆】

其中一个角的水平和垂直半径值都需要是100%，而其他三个角都不能设为圆角

【扩展练习】

【平行四边形】

【平行四边形--伪元素】

【八角形】

【菱形】

需要图片的宽度与容器的对角线相等，而max-width: 100%是边长相等

scale()变形样式，是以它的中心点进行缩放的，除非额外指定了transform-origin

通过width属性来放大图片时，只会以它的左上角为原点进行缩放，需要负外边距调整

【裁切路径方案clip-path菱形】

【相关知识点】

clip-path属性 可以防止部分元素通过定义的剪切区域来显示（目前兼容性较差，IE和Edge不支持）

生成器

一、基本图形

inset()矩形（上右下左的边距round上右下左圆角）

inset()可以传入5个参数，分别对应top,right,bottom,left的裁剪位置,round radius（可选，圆角）

circle圆形

circle()可以传人2个可选参数：

1. 圆的半径，默认元素宽高中短的那个为直径，支持百分比

2. 圆心位置，默认为元素中心点

半径公式

如果半径使用百分比：圆的半径 = (sqrt(width^2+height^2)/sqrt(2)) * 百分比

ellipse椭圆

ellipse()可以传人3个可选参数；

1. 椭圆的X轴半径，默认是宽度的一半，支持百分比

2. 椭圆的Y轴半径，默认是高度的一半，支持百分比

3. 椭圆中心位置，默认是元素的中心点

二、多边形polygon--正三角形

x: 0, y:100% 从元素的左上角开始，并从那里开始移动

x: 50%, y: 0

x: 100%, y: 100%  元素右边，元素底部

从左下角x: 0, y:100%开始，水平移动到50%，然后垂直向上到达顶部的坐标点（第二个点），接着水平移动到100%的位置，最后垂直向下回到底部，到达第三个坐标点

正方形

从左上角开始，垂直向下100%第二个点，平移100%第三个点，垂直向上0第四个点

正五边形  59/（59+95）=38.31%，31/（81*2）=19.14%

162/2 = 81

59是上面三角形的高度

95是下面三角形的高度

31是下面四边形的高度

正六边形  50/（100+50 2）=25%，150/（100+50 2）=75%

50 是左边三角形的高度

100 是边长

正七边形 

22/（100+62 2）=10.09%

202/（100+62 2）=90.18%

43/（43+97+78）=19.72%

（43+97）/（43+97+78）=64.22%

62/（100+62 2）=27.68%

（100+62）/（100+62 2）=72.32%

正八边形

71/（100+71 2）=29.34%

（71+100）/（100+71 2）=70.66%

五角星

红叉叉

标签

也可用于动画中

如果觉得百分比不好计算，可以换算成px

下面就是第一个点的计算方法

35.00%*800=280px

29.75%*400=119px

只要两个 clip-path，其中包含的点个数相同，在animation的帧内部就可以线性切换了

如果不同是没有效果的

小技巧，如果点不够，可以将两个坐标点进行重合即可

推荐网址：

30个动物全部使用CSS3写的。超牛

绘制五边形和六边形

Time: 20200131

绘制图形的套路就是，先拆分，然后再画基本的元素，考虑如何用旋转，变形完成。

最基础的就是如何绘制三角形，这也是相对来说比较难的一个点。

拆分为一个三角形和一个梯形。

梯形还可以再拆分，但是我们可以直接画出梯形来。

拆分为三角形 + 正方形 + 三角形。

总之，用CSS3画了这么一堆东西，都是在练习使用拆解 + 基本元素绘制，变形，旋转，位置设定，伪元素等综合使用。

显示效果：

END.

CSS3如何实现六边形按钮？

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

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

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