在css中创建边框为1px、背景透明的六边形

为了实现六边形并使其背景透明，有两种主要方法：使用SVG或CSS：

使用SVG

SVG是一种基于矢量的图像格式。它是一种创建复杂形状的理想选择，包括六边形。下面是一个使用SVG创建六边形的示例代码：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

    
        <meta charset="utf-8"><title>SVG</title><link rel="styleSheet" type="text/css" href="./style.css"><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的clip-path属性可以用来创建六边形。可以配合background-color和border属性来创建边框为1px、背景透明的六边形。如下代码所示：

<style>
  .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%);
  }
</style><div class="hexagon"></div>

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！