多边形布局
工作中遇到一个六边形布局的问题，自己百度了一种解决方法，前端群的大神们给出了另外两种解决方法，这里想总结一下，以后可以根据需要自行选择。
第一次发表博客，语言组织的不太好，所以打算直接写代码，简单粗暴。
第一种方法：利用border和绝对定位完成
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>六边形</title>
<style>
.wrap{margin:100px;width:303px;}
.nav{width:100px;height:58px;background:#339933;display:inline-block;position:relative;line-height:58px;text-align:center;color:#ffffff;font-size:14px;text-decoration:none;float:left;margin-top:31px;margin-right:1px;}
.nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-bottom:30px solid #339933;left:0px;top:-30px;}
.nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent;border-right:50px dotted transparent;border-top:30px solid #339933;bottom:-30px;left:0px;}
.a0{margin-left:100px;}
.a1{margin-left:50px;}
.nav:hover{background:#8CBF26;color:#333333;}
.nav:hover s{border-bottom-color:#8CBF26;}
.nav:hover b{border-top-color:#8CBF26;}
</style>
</head>
<body>
<div class="wrap">
<a class="nav a0" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a1" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a2" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a3" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a4" target="_blank" href="#"><s></s>广播<b></b></a>
<a class="nav a5" target="_blank" href="#"><s></s>广播<b></b></a>
</div>
</body>
</html>
第二种方法和第三种方法都是利用css3中的旋转形成六边形
第二种方法：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3实现六角形效果 - 1000寻素材网</title>
<style>
.container {
width:700px;
height:100%;
position:absolute;
top:50px;
left:50%;
margin-left:-350px;
}
/* HEXAGON STARTS HERE */
.hex {
width:150px;
height:86px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-background-size: auto 173px;
-moz-background-size: auto 173px;
-ms-background-size: auto 173px;
-o-background-size: auto 173px;
position: relative;
float:left;
margin:25px 5px;
text-align:center;
zoom:1;
}
.hex.hex-gap {
margin-left: 86px;
}
.hex a {
display:block;
width: 100%;
height:100%;
text-indent:-9999em;
position:absolute;
top:0;
left:0;
}
.hex .corner-1,
.hex .corner-2 {
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
background: inherit;
z-index:-2;
overflow:hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.hex .corner-1 {
z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.hex .corner-2 {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
</style>
</head>
<body>
<div class="container">
<div class="hex hex-1 hex-gap">
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>
</div>
</body>
</html>
第三种方法：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 实现六边形图片展示效果</title>
<style type="text/css">
body, div, img, ul, li
{
margin: 0;
padding: 0;
}
body
{
font-size: 12px;
background-color: #DDD;
min-width: 1200px;
}
ul, ul li
{
list-style: none;
}
.clear
{
clear: both;
}
.box
{
position: relative;
width: 630px;
margin: 100px auto;
}
.lineF, .lineS
{
position: absolute;
visibility: hidden;
}
.lineS
{
top: 182px;
left: 105px;
}
.boxF, .boxS, .boxT, .overlay
{
width: 200px;
height: 250px;
overflow: hidden;
}
.boxF, .boxS
{
visibility: hidden;
}
.boxF
{
transform: rotate(120deg);
float: left;
margin-left: 10px;
-ms-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
}
.boxS
{
transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
}
.boxT
{
transform: rotate(-60deg);
background: no-repeat 50% center;
background-size: 125% auto;
-ms-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-webkit-transform: rotate(-60deg);
visibility: visible;
}
.overlay
{
position: relative;
}
.overlay:hover
{
background-color: rgba(0,0,0,0.6);
}
.boxT:hover .overlay
{
display: block;
}
.overlay a
{
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
margin: -16px 0 0 -16px;
border-radius: 3px;
background-color: #d3b850;
text-align: center;
line-height: 32px;
width: 32px;
height: 32px;
text-decoration: none;
color: White;
font-size: 18px;
font-weight: bolder;
}
</style>
</head>
<body>
<div class="box">
<!--第一行(lineFirst)-->
<div class="lineF">
<div class="boxF">
<div class="boxS">
<div class="boxT" style="background-image: url(img/1.jpg);">
<div class="overlay">
<a href="#">+</a>
</div>
</div>
</div>
</div>
<div class="boxF">
<div class="boxS">
<div class="boxT" style="background-image: url(img/2.jpg);">
<div class="overlay">
<a href="#">+</a>
</div>
</div>
</div>
</div>
<div class="boxF">
<div class="boxS">
<div class="boxT" style="background-image: url(img/3.jpg);">
<div class="overlay">
<a href="#">+</a>
</div>
</div>
</div>
</div>
</div>
<!--第二行(lineSecond)-->
<div class="lineS">
<div class="boxF">
<div class="boxS">
<div class="boxT" style="background-image: url(img/4.jpg);">
<div class="overlay">
<a href="#">+</a>
</div>
</div>
</div>
</div>
<div class="boxF">
<div class="boxS">
<div class="boxT" style="background-image: url(img/5.jpg);">
<div class="overlay">
<a href="#">+</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
三种方法都能实现，可以根据需要选择。
感觉不管是css，还是js都是很好玩的，带着玩乐的心情将他们学好。
参考链接：http://www.jb51.net/css/72811.html
http://doc.okbase.net/similar/archive/109640.html
