CSS 3图形之六边形

2015/06/16 33962

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>> 

<html>
	<head>
		<title>Draw Hive</title>
	</head>
	<style type="text/css">
		.hexagon {
			display: inline;
			float: left;
		}
		#second {
			margin-left: 4px;
		}
		#third {
			clear: left;
			margin-left: 54px;
			margin-top: -28px;
		}
		.hiveTop{
			width: 0;
			border: 30px solid #6C6;
			border-top: none;
			border-bottom: 30px solid #6C6;
			border-left: 52px solid transparent;
			border-right: 52px solid transparent;
		}
		.hiveCenter {
			width: 104px;
			height: 60px;
			background-color: #6C6;
		}
		.hiveBottom {
			width: 0;
			border: 30px solid #6C6;
			border-bottom: none;
			border-top: 30px solid #6C6;
			border-left: 52px solid transparent;
			border-right: 52px solid transparent;
		}
	</style>
	<body>
		<div class="hexagon" id="first">
			<div class="hiveTop">
			</div>
			<div class="hiveCenter">
			</div>
			<div class="hiveBottom">
			</div>
		</div>
		<div class="hexagon" id="second">
			<div class="hiveTop">
			</div>
			<div class="hiveCenter">
			</div>
			<div class="hiveBottom">
			</div>
		</div>
			<div class="hexagon" id="third">
			<div class="hiveTop">
			</div>
			<div class="hiveCenter">
			</div>
			<div class="hiveBottom">
			</div>
		</div>
	</body>
</html>