您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > css样式 >

css3轻松实现六边形

时间：2014-01-06 09:25 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

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

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

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

css3轻松实现六边形由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/csstx/6537.html

标签：网站源码

上一篇：CSS线性渐变垂直和水平渐变linear-gradient

下一篇：CSS画梅花2扑克牌

[css样式] HTML5/CSS3画国旗-五星红旗

[css样式] 圆形按钮HTML5/CSS3 button代码H

[css样式] 多种CSS3纹理背景效果

[css样式] CSS3表格特效边框阴影+圆角有立

[css样式] CSS实现背景渐变 CSs滤镜使用

[css样式] 鼠标经过显示隐藏层

[css样式] css的margin缩写方式

[css样式] CSS圆角框，圆角提示框

[css样式] 超炫css3-rotate环形旋转特效有

[css样式] 让div居中对齐的css

[css样式] CSS实现的搜索框点击后提示消失

[css样式] css3轻松实现六边形

相关内容推荐

中国年PNG图标

ASP.NET开发教程

简明现代魔法

邯郸网站建设

ASP.NET C#教程

前端开发工程师

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1