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

01-28

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

姿勢1

css的border

/*css*/n.lb01 {ntposition: relative;ntwidth: 200px;ntheight: 120px;ntbackground-color: red;ntmargin: 100px;n}n.lb01:after {ntcontent: "";ntposition: absolute;ntdisplay: block;nttop: -160px;ntwidth: 0;ntheight: 0;ntborder: 100px solid transparent;ntborder-bottom: 60px solid red;n}n.lb01:before {ntcontent: "";ntposition: absolute;ntdisplay: block;ntbottom: -160px;ntwidth: 0;ntheight: 0;ntborder: 100px solid transparent;ntborder-top: 60px solid red;n}n

<div class="lb01"></div>n

效果如圖：

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

姿勢2

css3的transform

.lb02 {ntwidth: 260px;ntheight: 300px;ntmargin: 50px;nt-webkit-transform: rotate(60deg);ntoverflow: hidden;n}n.lb02 div,n.lb02 img {ntwidth: 100%;ntheight: 100%;ntoverflow: hidden;n}nn.lb02> div {nt-webkit-transform: rotate(-120deg);n}nn.lb02> div> div {nt-webkit-transform: rotate(60deg);n}n

<div class="lb02">nt<div>ntt<div>nttt<img src="000.png" />ntt</div>nt</div>n</div>n

效果如圖：

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

姿勢3

svg的多邊形

<svg viewbox="0,0,400,400" width="400" height="400">nt<polygon nttpoints="300.0000,200.0000 ntt250.0000,113.3975 ntt150.0000,113.3975 ntt100.0000,200.0000 ntt150.0000,286.6025 ntt250.0000,286.6025" nttstyle="fill:lime;ntttstroke:purple;ntttstroke-width:2" />n</svg>n

效果圖：

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

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

姿勢4

canvas繪圖

var canvas = document.getElementById("canvas");ntcanvas.width = 400;ntcanvas.height = 400;nvar cc = canvas.getContext("2d");nn// 填充一個背景ncc.fillStyle = "#31a6e2";ncc.rect(0 , 0 , 400 , 400);ncc.fill();nncc.beginPath();nfor (var i = 0 ; i < 6 ; i++) {ntvar x = Math.cos((i * 60)/180 * Math.PI) * 150 + 200 ;ntvar y = -Math.sin((i * 60)/180 * Math.PI) * 150 + 200;tntcc.lineTo(x,y);n}ncc.closePath();nttncc.lineWidth = 2;ncc.fillStyle = "#fc3598";ncc.fill();n

<canvas id="canvas"></canvas>n

效果圖：

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

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

代碼如下：

<!DOCTYPE html>n<html>nt<head>ntt<meta charset="UTF-8">ntt<title></title>nttntt<style type="text/css">nttt#test {nttttwidth: 850px;nttttpadding: 100px;nttttheight: 800px;nttttmargin: 0 auto;nttttborder: 1px solid red;ntttt-webkit-perspective: 1920px;n ttt-webkit-transform-origin: 50% 30% 600px;n tttoverflow: hidden;nttt}ntttntttul {ntttt-webkit-transform-style: preserve-3d;n tttt-webkit-transform: rotateX(60deg);nttt}ntttntttul:after {nttttcontent: "";nttttdisplay: block;nttttclear: both;nttt}ntttntttul li {nttttposition: relative;nttttfloat: left;nttttwidth: 90px;nttttheight: 160px;nttttlist-style: none;nttttmargin: 0px 50px;nttttbackground-color: #21a4e8;ntttt-webkit-transform: rotate(90deg);nttt}ntttul li:after {nttttcontent: "";nttttdisplay: block;nttttposition: absolute;ntttttop: 0;nttttright: 100%;nttttborder-style: solid;nttttborder: 80px solid transparent;nttttborder-width: 80px 50px;nttttborder-right-color: #21a4e8;ttttnttt}ntttul li:before {nttttcontent: "";nttttdisplay: block;nttttposition: absolute;ntttttop: 0;nttttleft: 100%;nttttborder-style: solid;nttttborder: 80px solid transparent;nttttborder-width: 80px 50px;nttttborder-left-color: #21a4e8;ttttnttt}nttt.dob {nttttmargin-left: 145px;nttt}ntttntt</style>nttnt</head>nt<body>ntt<div id="test">nttt<ul>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li class="dob"></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li class="dob"></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>ntttt<li></li>nttt</ul>ntttntt</div>nt</body>n</html>n

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