css3轻松实现六边形

2024-09-05 12:19:02

字体：大中小

来源：转载

供稿：网友

CSS3多边形实例，轻松实现一个六边形布局，是一个规则的六边形，三个罗列在一起，看一看CSS3 Draw的功能有多强大。有评论说，这其实就是先实现正多边形，然后平移图形，用取色器获取RGB值。

<html><head><title>css3 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>

上一篇：HTML5/CSS3画国旗-五星红旗

下一篇：html5 Loading方格网页加载特效