網頁中實現正六邊形的N中姿勢

1578735832 8年前發布 | 27K 次閱讀 WebKit CSS 前端技術 canvas

經常在別人家的網頁上看到各中好看圖形，其中就有正六邊形和組合的蜂窩狀圖形。今天我們來盤點一下，網頁上有哪些姿勢實現這個效果

姿勢1

css的border

/*css*/
.lb01 {
    position: relative;
    width: 200px;
    height: 120px;
    background-color: red;
    margin: 100px;
}
.lb01:after {
    content: "";
    position: absolute;
    display: block;
    top: -160px;
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 60px solid red;
}
.lb01:before {
    content: "";
    position: absolute;
    display: block;
    bottom: -160px;
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-top: 60px solid red;
}
<div class="lb01"></div>

效果如圖：

 優點：代碼簡單，兼容性好。缺點：內部不能完美的嵌套內容，只有填充純色才好看.

姿勢2

css3的transform

.lb02 {
    width: 260px;
    height: 300px;
    margin: 50px;
    -webkit-transform: rotate(60deg);
    overflow: hidden;
}
.lb02 div,
.lb02 img {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.lb02> div {
    -webkit-transform: rotate(-120deg);
}

.lb02> div> div {
    -webkit-transform: rotate(60deg);
}
<div class="lb02">
    <div>
        <div>
            <img src="000.png" />
        </div>
    </div>
</div>

效果如圖：

優點：內部可以嵌套圖片內容。缺點：dom結構稍微多，需要對css3支持的瀏覽器才可以.

姿勢3

svg的多邊形

<svg viewbox="0,0,400,400" width="400" height="400">
    <polygon 
        points="300.0000,200.0000 
        250.0000,113.3975 
        150.0000,113.3975 
        100.0000,200.0000 
        150.0000,286.6025 
        250.0000,286.6025" 
        style="fill:lime;
            stroke:purple;
            stroke-width:2" />
</svg>

效果圖：

優點：矢量圖形。缺點：瀏覽器兼容性不理想，稍微有一點偏冷門。

什么？你問我上面的坐標點怎么得到的？肯定是寫一點代碼算出來的呀，難道手寫？具體怎么算可以參考下一種方式中的代碼.

姿勢4

canvas繪圖

var canvas = document.getElementById("canvas");
    canvas.width = 400;
    canvas.height = 400;
var cc = canvas.getContext("2d");

// 填充一個背景
cc.fillStyle = "#31a6e2";
cc.rect(0 , 0 , 400 , 400);
cc.fill();

cc.beginPath();
for (var i = 0 ; i < 6 ; i++) {
    var x =  Math.cos((i * 60)/180 * Math.PI) * 150 + 200 ;
    var y = -Math.sin((i * 60)/180 * Math.PI) * 150 + 200;  
    cc.lineTo(x,y);
}
cc.closePath();

cc.lineWidth = 2;
cc.fillStyle = "#fc3598";
cc.fill();
<canvas id="canvas"></canvas>

效果圖：

優點：還沒想好。缺點：還沒想好。這個我已經不知道怎么描述了.....

然后我們用六邊形玩點有意思的：如圖

代碼如下：

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

        <style type="text/css">
            #test {
                width: 850px;
                padding: 100px;
                height: 800px;
                margin: 0 auto;
                border: 1px solid red;
                -webkit-perspective: 1920px;
                -webkit-transform-origin: 50% 30% 600px;
                overflow: hidden;
            }

            ul {
                -webkit-transform-style: preserve-3d;
                -webkit-transform: rotateX(60deg);
            }

            ul:after {
                content: "";
                display: block;
                clear: both;
            }

            ul li {
                position: relative;
                float: left;
                width: 90px;
                height: 160px;
                list-style: none;
                margin: 0px 50px;
                background-color: #21a4e8;
                -webkit-transform: rotate(90deg);
            }
            ul li:after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                right: 100%;
                border-style: solid;
                border: 80px solid transparent;
                border-width: 80px 50px;
                border-right-color: #21a4e8;                
            }
            ul li:before {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 100%;
                border-style: solid;
                border: 80px solid transparent;
                border-width: 80px 50px;
                border-left-color: #21a4e8;             
            }
            .dob {
                margin-left: 145px;
            }

        </style>

    </head>
    <body>
        <div id="test">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="dob"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li class="dob"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>

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

當然，你也發揮你的聰明才智，玩點更有意思的。如果你有新的寫六邊形的方式，也歡迎你補充!

 

來自：https://zhuanlan.zhihu.com/p/24489820

 

 本文由用戶 1578735832 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！