实现透明背景六边形
需求：实现一个六边形，背景色需为透明，border为1px。
解决方案
可以通过多种方式实现透明背景的六边形。
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>
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> 
