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

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《如何使用 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%);
}

到这里，我们也就讲完了《如何使用 CSS 实现透明背景且边框为 1px 的六边形？ 》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！