如何用CSS和SVG实现透明背景六边形？

怎么入门文章编程？需要学习哪些知识点？这是新手们刚接触编程时常见的问题；下面golang学习网就来给大家整理分享一些知识点，希望能够给初学者一些帮助。本篇文章就来介绍《如何用CSS和SVG实现透明背景六边形？ 》，涉及到，有需要的可以收藏一下

实现透明背景六边形

需求：实现一个六边形，背景色需为透明，border为1px。

解决方案

可以通过多种方式实现透明背景的六边形。

SVG

利用SVG的元素，设置fill为透明色，stroke为指定颜色，可以创建六边形：

<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属性，可以剪裁元素形成六边形，同时设置背景色为透明：

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

<style>
  .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%);
  }
</style>

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何用CSS和SVG实现透明背景六边形？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。