当前位置：首页 > news >正文

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

news 来源：原创 2025/9/21 13:16:37

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

分析：

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

在这里插入图片描述

疑问：

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>