[分享]css六边形隐藏

CSS中有一个有趣的特效是六边形隐藏。它可以将一个元素隐藏起来，并且将元素的形状设置成六边形。/ 六边形隐藏 / .hexagon { width: 100px; height: 55px; : re...

CSS中有一个有趣的特效是六边形隐藏。它可以将一个元素隐藏起来，并且将元素的形状设置成六边形。

/* 六边形隐藏 */
.hexagon {
  width: 100px;
  height: 55px;
  position: relative;
  margin: 27.5px 0;
  background-color: #555;
}
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}
.hexagon:before {
  bottom: 100%;
  border-bottom: 27.5px solid #555;
}
.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 27.5px solid #555;
} 

以上就是六边形隐藏的CSS代码实现。需要注意的是，上下两个三角形是通过伪元素:before和:after实现的。它们分别设置在元素的顶部和底部，达到形成六边形的效果。

另外，通过设置元素的宽高比例，我们可以自由控制六边形的大小。这里我们设置的宽高比例为100:55。

最后，将要隐藏的内容放在这个元素里面，就可以实现六边形隐藏效果了。