您现在的位置是：网站首页> 编程资料编程资料
css画正六边形的两种方法_CSS教程_CSS_网页制作_
2023-11-04
252人已围观
简介 本文给大家分享css画正六边形的两种方法，每种方法都不错，需要的朋友跟随小编一起看看吧
说下两种css 制作正六边形的方法。
先看一下结果：
在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图（√3其实是根号3）：
方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图：
before三角形部分是div的before伪元素，after三角形部分是div的after伪元素。
html代码：
css代码：
.div { position: relative; width: 50px; height: 86.6px; margin: 50px auto; background-color: red; } .div:before { content: ''; display: block; position: absolute; width: 0; height: 0; right:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent red transparent transparent; } .div:after { content: ''; display: block; position: absolute; width: 0; height: 0; left:50px; border-width: 43.3px 25px; border-style: solid; border-color: transparent transparent transparent red; top:0; }注意div及伪元素的宽高需要根据上面的公式计算。
方法二：也是把正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形，如图：
html代码：
css代码:
.one { width: 50px; height: 86.6px; margin: 0 auto; border-top: 1px solid red; border-bottom: 1px solid red; } .two { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%,-50%); transform: rotate(60deg); border-top: 1px solid red; border-bottom: 1px solid red; } .three { position: absolute; width: 50px; height: 86.6px; left: 25px; top: 0; transform: translate(-50%,-50%); transform: rotate(300deg); border-top: 1px solid red; border-bottom: 1px solid red; }以上两种方法，元素的宽高尺寸以及左右位移需要根据上面的公式计算不能随意填写。
总结
以上所述是小编给大家介绍的css画正六边形的两种方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
相关内容
- 微信小程序 CSS filter（滤镜）的使用示例详解_CSS教程_CSS_网页制作_
- css实现各种0.5px的线(小结)_CSS教程_CSS_网页制作_
- 移动端使用 rem 单位时 css sprites 定位问题的解决_CSS教程_CSS_网页制作_
- CSS3地图动态实例代码(圆圈向外扩散)_css3_CSS_网页制作_
- CSS 曲线阴影实现的示例代码_CSS教程_CSS_网页制作_
- 移动端优先的flex三栏布局的使用方法_CSS布局实例_CSS_网页制作_
- css3绘制百度的小度熊_css3_CSS_网页制作_
- 使用CSS transition和animation改变渐变状态的实现方法_CSS教程_CSS_网页制作_
- 详解关于flex-shrink如何计算的冷知识_CSS教程_CSS_网页制作_
- 刀塔传奇电魂伤害测试 或被削弱_手机游戏_游戏攻略_
