如何用css画正六边形？用css画正六边形的两种方法（代码实例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何用css画正六边形？用css画正六边形的两种方法（代码实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2046字，纯文字阅读大概需要3分钟。
内容图文
本章给大家介绍如何用css画正六边形？用css画正六边形的两种方法（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。在之前要先了解一下正六边形内角和边的关系，正六边形的每个内角是60deg，如图（√3其实是根号3）：
方法一：原理把正六边形分成三部分，左中右分别是：before部分，div部分，after部分，如图：
before三角形部分是div的before伪元素，after三角形部分是div的after伪元素。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用css画正六边形</title>
<style type="text/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;
}
</style>
</head>
<body>
<div class='div'></div>
</body>
</html>效果图：
注意div及伪元素的宽高需要根据上面的公式计算。
方法二：也是把正六边形分成三个宽高相同的div，然后使用定位以及css3 transform:rotate分别向左右旋转60deg形成正六边形，如图：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用css画正六边形</title>
<style type="text/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;
}
</style>
</head>
<body>
<div style='position:relative;width:100px;margin:0 auto;'>
<div class='one'></div>
<div class='two'></div>
<div class='three'></div>
</div>
</body>
</html>效果图：
以上就是如何用css画正六边形？用css画正六边形的两种方法（代码实例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的如何用css画正六边形？用css画正六边形的两种方法（代码实例）全部内容，希望文章能够帮你解决如何用css画正六边形？用css画正六边形的两种方法（代码实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。