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

最新推荐文章于 2025-09-25 10:35:57 发布

原创最新推荐文章于 2025-09-25 10:35:57 发布 · 1.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

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

分析：

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

在这里插入图片描述

疑问：

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>