如何打造透明背景、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%);
}以上就是如何用CSS打造透明背景、1px边框的六边形？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
164
收藏
