您的位置：首页 > Web前端 > CSS

css3--布局正六边形

2015-12-04 17:24 309 查看

怎样布局正六边形？
-->如果不能直接布局，就只能采用图形的组合。
-->既然是正六边形，则：

-->AB=2分之根号3乘2倍的边长，也就是对于矩形ABCD来说，AB是BD的根号3倍（也可以用正切算tan30deg）。这样的矩形旋转两次60deg，轨迹就恰好是一个正六边形。

-->事实上我们常常是要让它有一个完整背景的，如果只是搞三个块拧在一起，必然背景是不能一体的，

-->所以，我们的目标是：既要撑开其余四边，又要获得完整背景的。

-->达到背景一体的思路思路：把其中两块作为另一块的子元素，然后通过继承背景属性，来达到背景一体。

-->矛盾的突破：1，撑开其余四边的个体可以用两个等大矩形子元素同心旋转正负60deg;2,要保持背景的完整，对于每个旋转的矩形而言，设置能框住自身的的子元素并继承背景，就克服了角度旋转，而最便捷的，就是直接以正六边形直径作为边长的正方形。

-->实现的关键：背景继承background: inherit; 为了简洁必要，可以将负责背景拼合的连个子元素通过伪类来实现，然后过定位来实现上文的“框住”。

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>

body{
padding:50px; background: #eee;
}

/* HEXAGON STARTS HERE */
.hex {
width:150px;
height:86px;
background-color: #ccc;
background-repeat: no-repeat;
background-position: 50% 50%;
-webkit-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;
}

.hex .corner-1 {
z-index:-1;
-webkit-transform: rotate(60deg);
}

.hex .corner-2 {
-webkit-transform: rotate(-60deg);
}

.hex .corner-1:before,
.hex .corner-2:before {
width: 173px;
height:    173px;
content: '';
position: absolute;
top:0;
left: 0;
z-index: 1;
background: inherit;
background-repeat:no-repeat;
-webkit-backface-visibility: hidden;
}

.hex .corner-1:before {
-webkit-transform: rotate(-60deg) translate(-87px, 0px);
-webkit-transform-origin: 0 0;
}

.hex .corner-2:before {
-webkit-transform: rotate(60deg) translate(-48px, -11px);
bottom:0;
}

/*=======================================================*/
.hex.hex-1 {
background-image:url("http://www.16sucai.com/uploadfile/show2013/0605002/images/4.jpg");
}

.hex.hex-2 {
background: #f5c53c;
}

.hex.hex-3 {
background: #80b971;
}
</style>
</head>
<body>

<div class="hex hex-1 hex-gap">

<div class="corner-1"></div>
<div class="corner-2"></div>
</div>

<div class="hex hex-2">

<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>

<div class="hex hex-3">

<a href="#"></a>
<div class="corner-1"></div>
<div class="corner-2"></div>
</div>

</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航