怎樣布局正六邊形？
-->如果不能直接布局，就只能采用圖形的組合。
-->既然是正六邊形，則：
-->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>
