基于css实现正六边形的三种方案

张国伟 · 2025-2-17 18:36:27

方案一：通过旋转三个长方形天生正六边形

分析：

如下图所示，我们可以通过旋转三个长方形来得到一个正六边形。

复制代码

疑问：

1. 长方形的宽高分别是多少？

设正六边形的边长是100，基于一些数学常识，可以得出上图得一些数据。
我们现在开始求ac的长度：由于：sin30° = 1/2，则ac/ad = 1/2。因ad=100，所以ac=50；
再根据勾股定理求cd长度：ad²-ac² = 100² - 50² = cd²。故cd约等于86.60
**所以长方形的宽是100，高则是86.6 * 2 =173.2 **
2.必要将长方形旋转多少度？

由于css的transform的rotate是以中央点举行旋转的，所以我们要求的是∠abc，就知道必要将长方形旋转多少度了
1.由于ab是垂直ad的，所以∠bad是90°。
2.由于正六边形的内角是120%，bd是中分∠adc，所以∠adb是60°。
3.由于▲abd是直角三角形，所以∠abd = 180° - ∠bad - ∠adc = 30°。
4.由于▲abd和▲bcd完全相称，所以∠abc = 2 * ∠abd = 60°。
所以我们必要将长方形旋转60°
完备实当代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.app {
position: relative;
width: 100px;
height: 173.2px;
margin: 0 auto;
}
.item {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 173.2px;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.item_1 {
transform: rotate(60deg);
}
.item_3 {
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="app">
<div class="item_1 item"></div>
<div class="item_2 item"></div>
<div class="item_3 item"></div>
</div>
</body>
</html>

复制代码

方案二：基于伪元素 + border天生三角形原理

媒介：由下图观察可知，正六边形可以通过2个三角形 + 1个长方形拼装出来。故左右两个三角则利用伪元素天生。

我们还是设正六边形的边长是100，由方案一可知道，三角形的高是50，底边是173.2。
border天生三角形原理

当我们将盒子的宽高设置为0之后，再设置border，我们会发现他会天生一个矩形，而且是由四个三角形组合而成。
代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 0;
height: 0;
border: 100px solid;
border-color: aqua rebeccapurple red blue;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

复制代码

结果：

从上图观察得知：

右边的三角形的高，是由border的厚度决定的
右边三角形的底边长，是由上下两个三角形的厚度相加决定的

正六边形的实现：

正六边形中三角形的天生原理（以天生左侧的三角形为例）

我们将上、下、左边的border填充颜色设置为透明，右边的三角形设置为赤色，这样我们就可以得到一个三角形了。
通过border天生的三角形的高，是通过border的厚度决定的，由方案一可知，三角形的高是50，所以我们设置右侧的border厚度为50。
由于【右边三角形的底边长，是由上下两个三角形的厚度相加决定的】，我们在方案一中可以知道，底边长是173.2，所以上下两个三角形的border设置为173.2 / 2 =86.6。
天生三角形之后，通过定位向左移动100，这样就天生了。

正六边形实当代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
position: relative;
width: 100px;
height: 173.2px;
margin: 0 auto;
background-color: red;
}
.div::before {
position: absolute;
display: block;
content: '';
width: 0;
height: 0;
border: 50px solid transparent;
border-right-color: red;
border-top-width: 86.6px;
border-bottom-width: 86.6px;
right: 100px;
}
.div::after {
position: absolute;
display: block;
content: '';
width: 0;
height: 0;
border: 50px solid transparent;
border-left-color: red;
border-top-width: 86.6px;
border-bottom-width: 86.6px;
right: -100px;
}
</style>
</head>
<body>
<div class="div"></div>
</body>
</html>

复制代码

方案四：利用clip-path天生

实现比较简便，但对于一些低版本的欣赏器会有兼容性问题，慎用。
polygon是天生多边形的方法，通过提供坐标来天生。
如：polygon(x1 y1, x2 y2, x3 y3)这样子

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.div {
width: 100px;
height: 100px;
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
background-color: red;
}
</style>
</head>
<body>
<div class="div">
</div>
</body>
</html>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

基于css实现正六边形的三种方案

本帖子中包含更多资源

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块