[分享]css六边形加背景

CSS 六边形加背景是一种独特的设计方式，通过这种方式可以制作出带有六边形背景的页面元素。下面介绍如何使用 CSS 制作六边形加背景。 .hexagon { width: 100px; height:...

CSS 六边形加背景是一种独特的设计方式，通过这种方式可以制作出带有六边形背景的页面元素。下面介绍如何使用 CSS 制作六边形加背景。

.hexagon {
  width: 100px;
  height: 55px;
  background: #3e3e3e;
  position: relative;
  display: inline-block;
  margin: 20px;
}

.hexagon:before,
.hexagon:after {
  content: "";
  width: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  position: absolute;
  left: 0;
  z-index: 1;
}

.hexagon:before {
  border-bottom: 25px solid #3e3e3e;
  top: -25px;
}

.hexagon:after {
  border-top: 25px solid #3e3e3e;
  bottom: -25px;
}

以上代码含有两个伪元素:before和:after，分别用来制作六边形的上三角和下三角。首先，通过设置左右边框的宽度和颜色为透明，形成一个三角形；然后，通过设置其它边框的宽度和颜色，形成一个六边形。

接下来，为六边形添加背景颜色或者背景图片，只需在类 hexagon 的样式代码中添加 background 样式即可。例如：

.hexagon {
  width: 100px;
  height: 55px;
  background-image: url(图片地址);
  background-size: cover;
  position: relative;
  display: inline-block;
  margin: 20px;
}

通过上述样式代码可以设置六边形的背景图片，并将其按比例缩放至恰好填充整个元素。将图片地址替换为实际图片地址即可。

总之，CSS 六边形加背景是一种简单又独特的设计方式，可以为页面元素带来新的风格和效果。只需按照上述样式代码进行调整，即可轻松制作出六边形加背景的页面元素。