css3--佈局正六邊形

時間 2019-11-21

原文原文鏈接

怎樣佈局正六邊形？
-->若是不能直接佈局，就只能採用圖形的組合。
-->既然是正六邊形，則：html

-->AB=2分之根號3乘2倍的邊長，也就是對於矩形ABCD來講，AB是BD的根號3倍（也能夠用正切算tan30deg）。這樣的矩形旋轉兩次60deg，軌跡就剛好是一個正六邊形。web

-->事實上咱們經常是要讓它有一個完整背景的，若是隻是搞三個塊擰在一塊兒，必然背景是不能一體的，佈局

-->因此，咱們的目標是：既要撐開其他四邊，又要得到完整背景的。url

-->達到背景一體的思路思路：把其中兩塊做爲另外一塊的子元素，而後經過繼承背景屬性，來達到背景一體。spa

-->矛盾的突破：1，撐開其他四邊的個體能夠用兩個等大矩形子元素同心旋轉正負60deg;2,要保持背景的完整，對於每一個旋轉的矩形而言，設置能框住自身的的子元素並繼承背景，就克服了角度旋轉，而最便捷的，就是直接以正六邊形直徑做爲邊長的正方形。code

-->實現的關鍵：背景繼承background: inherit; 爲了簡潔必要，能夠將負責背景拼合的連個子元素經過僞類來實現，而後過定位來實現上文的「框住」。
orm

代碼實現：htm

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。