以下是一个基本的六边形代码,其中包含一个内部图片和边框的样式。

HTML代码:

<div class="hexagon">
  <div class="hexagon-image">
    <img src="image.jpg">
  </div>
</div>

CSS样式:

.hexagon {
  position: relative;
  width: 200px;
  height: 115.47px;
  background-color: #6C6;
  margin: 57.74px 0;
}

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

.hexagon:before {
  bottom: 100%;
  border-bottom: 57.74px solid #6C6;
}

.hexagon:after {
  top: 100%;
  width: 0;
  border-top: 57.74px solid #6C6;
}

.hexagon-image {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 180px;
  height: 95.47px;
  overflow: hidden;
  border: 5px solid #fff;
}

.hexagon-image img {
  width: 100%;
  height: auto;
  display: block;
}

这个代码会创建一个六边形的容器,内部有一个图片并带有白色的边框。你可以根据需要更改颜色、大小和边框样式。

帮我写一段代码:六边形里面一个图片加边框

原文地址: https://www.cveoy.top/t/topic/C72 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录