CSS3实现正六边形图片

最新推荐文章于 2023-10-20 13:31:40 发布

飞羽轩

最新推荐文章于 2023-10-20 13:31:40 发布

阅读量1.2k

点赞数 1

文章标签： CSS3 正六边形

本文链接：https://blog.csdn.net/weixin_42679187/article/details/89210966

版权

<!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>