如何使用 CSS 绘制曲线边缘六边形？

如果您需要在页面上显示一个六边形，并且希望它具有曲线的边缘，那么您可以使用 CSS 来实现这一效果。本文将向您介绍如何使用 CSS 绘制曲线边缘六边形。

1. 创建 HTML 结构

首先，我们需要创建一个 HTML 结构，用于容纳六边形。以下是一个简单的 HTML 结构：

<div class="hexagon">
  <div class="hexagon-inner">
    <!-- 六边形内容 -->
  </div>
</div>

其中，hexagon 类用于定义六边形的容器，hexagon-inner 类用于定义六边形的内容。

2. 定义 CSS 样式

然后，我们需要定义 CSS 样式来显示六边形。请参考下面的 CSS 样式：

.hexagon {
  position: relative;
  width: 200px;
  height: 115.5px;
  background-color: #fff;
  margin: 57.75px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  top: -70.71px;
  left: 29.29px;
  background-color: inherit;
  transform: rotate(45deg);
  transform-origin: 0 0;
  border-radius: 10px;
}

.hexagon:before {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.hexagon:after {
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

这个 CSS 样式将显示一个曲线边缘的六边形。其中，before 和 after 伪元素用于显示六边形的两个三角形，通过 clip-path 属性实现了三角形的曲线边缘。

3. 调整宽高比例

为了保证六边形的宽高比例为 1:1.732，我们需要在 CSS 样式中进行适当的调整。具体如下：

.hexagon {
  /* 省略其他样式 */
  width: 200px;
  height: 115.5px;
  margin: 57.75px 0;
}

.hexagon:before,
.hexagon:after {
  /* 省略其他样式 */
  width: 141.42px;
  height: 141.42px;
  top: -70.71px;
  left: 29.29px;
}

这样调整之后，六边形的宽度为 200px，高度为 115.5px，宽高比例为 1:1.732。

4. 完整代码

最终的 HTML 和 CSS 代码如下：

<div class="hexagon">
  <div class="hexagon-inner">
    <!-- 六边形内容 -->
  </div>
</div>

.hexagon {
  position: relative;
  width: 200px;
  height: 115.5px;
  background-color: #fff;
  margin: 57.75px 0;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  z-index: 1;
  width: 141.42px;
  height: 141.42px;
  top: -70.71px;
  left: 29.29px;
  background-color: inherit;
  transform: rotate(45deg);
  transform-origin: 0 0;
  border-radius: 10px;
}

.hexagon:before {
  clip-path: polygon(0 0, 0% 100%, 100% 0);
}

.hexagon:after {
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}

完整的代码片段已经按 markdown 标明，您可以轻松地将它们添加到您的项目中，实现曲线边缘六边形的效果。