如何用CSS打造透明背景、1px边框的六边形？

如何打造透明背景、1px边框的CSS六边形？

背景色的透明化是设计中常见的需求。下面介绍了两种使用CSS实现透明背景六边形的解决方案：

SVG方法：

此方法使用SVG多边形元素：

<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>

HTML/CSS方法：

这种方法使用HTML元素和clip-path属性：

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

.hexagon-container {
  height: 200px;
  justify-content: center;
  align-items: center;
}
.hexagon {
  width: 100px;
  height: calc(100px * tan(30deg));
  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: calc(96px * tan(30deg));
  background-color: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}