[分享]css与html实现六边形图片

在网页设计中，常常会需要使用六边形的图片元素来增加网页的美观度和视觉冲击力。实现这样的效果可以使用CSS与HTML，本文将介绍如何使用CSS与HTML来实现六边形图片。/ 定义六边形容器 / .hex...

在网页设计中，常常会需要使用六边形的图片元素来增加网页的美观度和视觉冲击力。实现这样的效果可以使用CSS与HTML，本文将介绍如何使用CSS与HTML来实现六边形图片。

/* 定义六边形容器 */
.hexagon {
  width: 300px;
  height: 172.98px;
  position: relative;
  /*调整文字位置*/
  margin: 86.48px 0;
}

/* 定义六边形实心部分 */
.hexagon:before,
.hexagon:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.hexagon:before {
  background-color: #ff6a3a;
  transform: rotate(60deg);
}

/* 定义六边形虚线部分 */
.hexagon:after {
  border: 2px dashed #fff;
  transform: rotate(-60deg);
}

/* 定义内部图片 */
.hexImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow:hidden;
}

/* 六边形DIV元素中插入img元素，实现内部图片 */
.hexImg img {
  width: 300px;
  height: 172.98px;
  -webkit-transform: rotate(-60deg) skewY(30deg);
  -ms-transform: rotate(-60deg) skewY(30deg);
  transform: rotate(-60deg) skewY(30deg);
  margin-left:-20%;
} 

如上代码所示，首先我们需要定义一个六边形容器的DIV元素，定宽定高，并且设置其相对或绝对定位，这是因为我们需要在该DIV中放置两个伪元素元素，分别用来做六边形的实心和虚线部分。实心部分用一个伪元素设置为六边形样式，并通过旋转60度来实现六边形效果，虚线部分同理旋转-60度。最后，我们需要在六边形容器内部，再添加一个DIV（如.hexImg），用来插入内部图片，通过该内部DIV元素的旋转和倾斜，来实现图片在六边形容器内部的显示效果。

以上就是使用CSS与HTML来实现六边形图片的方法，通过上述的代码帮助，您可以轻松实现带有六边形图片的网页设计效果。