CSS3实现六边形图片
六边形图片，下面有三种实现方式：第一种方式：
css：
.hexagon-img {
width: 200px;
height: 231px;
background: url('./girl.jpg') center center no-repeat;
background-size: cover;
-webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
html：
<div class="hexagon-img"></div>
第二种方式：
css：
.hexagon {
width: 200px;
height: 231px;
overflow: hidden;
visibility: hidden;
-webkit-transform: rotate(-60deg) skewY(30deg);
-ms-transform: rotate(-60deg) skewY(30deg);
transform: rotate(-60deg) skewY(30deg);
}
.hexagon .hexagon-cont {
width: 100%;
height: 100%;
visibility: visible;
background: url('./girl.jpg') center center no-repeat;
background-size: cover;
-webkit-transform: skewY(-30deg) rotate(60deg);
-ms-transform: skewY(-30deg) rotate(60deg);
transform: skewY(-30deg) rotate(60deg);
}
html：
<div class="hexagon">
<div class="hexagon-cont"></div>
</div>
第三种方式：
css：
.hexagon02,
.hexagon02 .hexagon-inter,
.hexagon02 .hexagon-cont {
width: 200px;
height: 231px;
overflow: hidden;
visibility: hidden;
}
.hexagon02 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.hexagon02 .hexagon-inter,
.hexagon02 .hexagon-cont {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
transform: rotate(-60deg);
}
.hexagon02 .hexagon-cont {
background: url('./girl.jpg') center center no-repeat;
background-size: cover;
visibility: visible;
}
html：
<div class="hexagon02">
<div class="hexagon-inter">
<div class="hexagon-cont"></div>
</div>
</div>
页:
[1]