帮我写一段代码:六边形里面一个图片加边框
以下是一个基本的六边形代码,其中包含一个内部图片和边框的样式。
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 著作权归作者所有。请勿转载和采集!