[分享]css六边形加背景图片

CSS六边形加背景图片是一种常见的布局方式，可以让网页看起来更加有趣和美观。下面我们来介绍一下如何使用CSS来实现这种效果。 .hexagon { width: 100px; height: 55px...

CSS六边形加背景图片是一种常见的布局方式，可以让网页看起来更加有趣和美观。下面我们来介绍一下如何使用CSS来实现这种效果。

.hexagon {
  width: 100px;
  height: 55px;
  background-color: transparent;
  position: relative;
  margin: 28.75px 0;
  border-left: 35px solid transparent;
  border-right: 35px solid transparent;
}

.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.hexagon:before {
  transform: rotate(60deg);
}

.hexagon:after {
  transform: rotate(-60deg);
}

.hexagon.bg-img:before,
.hexagon.bg-img:after {
  background-image: url("../img/hex-bg.jpg");
} 

在上面的代码中，我们通过border-left和border-right属性来创建了一个六边形，同时设置了height和width来确定六边形的大小。我们还通过:before和:after伪元素来分别创建了六边形的两个三角形部分。通过将这两个部分进行旋转，我们可以得到一个完整的六边形，并且将其填充成我们自己想要的背景图片。

在实际使用中，我们只需要给六边形加上一个类名（如.bg-img），并将其:before和:after伪元素的background-image属性改成我们自己的图片路径即可。如下所示：

<div class="hexagon bg-img"></div> 

通过这种方式，我们可以轻松地创建出一个漂亮的六边形背景图片，并应用到我们的网页布局中。同时，我们也可以通过CSS的其他属性来进一步调整六边形的大小、颜色和位置。希望上面的代码对大家有所帮助，谢谢。