CSS 3图形之六边形

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家,也给大家做个参考。

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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 [email protected] 举报,一经查实,本站将立刻删除。

相关推荐