如何使用 CSS 实现透明背景且边框为 1px 的六边形？

透明背景的六边形 CSS 实现

在设计图中，我们需要一个透明背景且边框为 1px 的六边形。如何使用 CSS 实现呢？

SVG 方法

SVG（可缩放矢量图形）可以轻松创建六边形。以下代码实现了透明背景、1px 边框的六边形：

<svg width="500" height="500">
  <polygon points="100,30 140,50 140,90 100,110 60,90 60,50" style="fill: transparent;stroke: #e07cc2; stroke-width:3px;"></polygon>
</svg>

纯 CSS 方法

另一种方法是使用纯 CSS。通过创建以下 HTML 和 CSS 代码，可以实现具有透明背景、1px 边框的六边形：

<div class="hexagon-container">
  <div class="hexagon"></div>
</div>

.hexagon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px; 
}

.hexagon {
  position: relative;
  width: 100px;
  height: 100px;
  background-color: pink;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hexagon:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 96px;
  height: 96px;
  background-color: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}