[分享]css六边形代码加边框

在Web设计中，我们经常会想要使用六边形这样的特殊形状来装饰我们的页面。在CSS中，我们可以使用clippath属性来快速实现六边形的效果: .hexagon { clippath: polygon(...

在Web设计中，我们经常会想要使用六边形这样的特殊形状来装饰我们的页面。在CSS中，我们可以使用clip-path属性来快速实现六边形的效果:

.hexagon {
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
} 

上面的代码中，我们使用了CSS的多边形剪切工具（polygon）来实现六边形的效果。具体来说，我们通过定义几个点的坐标，就可以将元素剪切成各种多边形的形状了。在我们的六边形中，我们定义了六个端点，每个端点的坐标都是以父元素的左上角为原点的百分比。这样一来，无论父元素的尺寸如何变化，我们的六边形都会自适应。

如果我们想要为六边形添加一个边框，也非常简单。只需要将六边形嵌套在一个容器元素中，并对容器元素设置边框样式即可:

.hexagon-wrap {
  border: 2px solid #fff;
  height: 80px;
  width: 138px;
  position: relative;
}

.hexagon {
  background-color: #fff;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  height: 100%;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
} 

上面的代码中，我们首先为六边形添加了背景色，这样我们才能看到边框。然后，我们为六边形定义了绝对定位，使得它可以覆盖在容器元素上。容器元素使用相对定位，并设置了一个固定的宽度和高度，来限制六边形的大小。最后，我们为容器元素添加了一个边框，以此为六边形添加了一个外框架。

总的来说，使用CSS绘制六边形是一种非常简单和灵活的方法，在设计Web页面的时候非常有用。我们可以通过clip-path属性来定义各种多边形形状，只要我们有足够的创意，就可以把各种复杂的形状绘制出来。