<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/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(images/meituanbanner.png) center center no-repeat;
background-size: cover;
visibility: visible;
}
</style>
</head>
<body>
<div class="hexagon02">
<div class="hexagon-inter">
<div class="hexagon-cont"></div>
</div>
</div>
</body>
</html>CSS3实现正六边形图片
猜你喜欢
转载自blog.csdn.net/weixin_42679187/article/details/89210966
今日推荐
周排行