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

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

css的border

/*css*/

.lb01
.lb01
:after
.lb01
:before

<

divclass
="lb01"
>
div>

css3的transform

.lb02

.lb02
div,
.lb02
img.lb02
>
div.lb02
>
div>
div

svg的多邊形

<

svgviewbox
="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>

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

canvas繪圖

var

canvas
=document
.getelementbyid
("canvas"
);canvas
.width
=400
;canvas
.height
=400
;varcc=
canvas
.getcontext
("2d"
);// 填充乙個背景cc.
fillstyle
="#31a6e2";cc
.rect(0
,0,400
,400
);cc
.fill
();cc
.beginpath
();for
(vari=
0;i<6;
i++)cc
.closepath
();cc
.linewidth=2
;cc.fillstyle
="#fc3598";cc
.fill
();

<

canvasid=
"canvas"
>
canvas
>

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

**如下：

<

html
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>
title
>
<
style
type
="text/css"
>
#test
ulul
:after
ulli
ulli
:after
ulli
:before
.dob
style
>
head
>
<
body
>
<
divid
="test"
>
<
ul>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
liclass
="dob"
>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
liclass
="dob"
>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
<
li>
li>
ul>
div>
body
>
html
>

經典網頁設計 六邊形在網頁設計中應用的精美案例

這篇文章繼續向大家分享一系列的國外創意網頁設計作品，這些作品都是從網上挑選出來的精品，相信能帶給你不一樣的視覺體驗。今天這篇文章給大家帶來的是六邊形 hexagons 元素在網頁設計中應用的優秀示例，這些網頁設計作品在六邊形的運用方面獨具匠心，值得學習！相信這些優秀的精美 設計案例能夠帶給您靈感，幫...

ArcGIS中實現指定面積蜂窩（正六邊形）方法

空間聚集研究中，地理尺度大多數都是基於格網構建的，只需fishnet下就行了。也常有使用社群 交通小區 tz 作為研究單元的。直到發現蜂窩網路做出的炫酷效果，迫不及待想試一下。六邊形可以說其幾何描述非常完美，但arcgis並沒有提供直接的工具生成正六邊形。受博文啟發，該博文闡述了利用泰森多邊形方法生...

基於Matlab的六邊形細胞自動機

目前大多數細胞自動機都是矩形的，這個是六邊形的。生存規則在倒數13 倒數18行。下面是兩種不同規則的動畫。列數設定 n row round n col 0.433 1.5 1.2 cell zeros n row,n col,14,2 cell 細胞狀態 細胞中點座標 六個邊點座標 六個鄰近圖形序號...