css畫正六邊形

2022-07-14 17:30:13 字數 1209 閱讀 7039

說下兩種css 製作正六邊形的方法。

先看一下結果:

在之前要先了解一下正六邊形內角和邊的關係,正六邊形的每個內角是60deg,如圖(√3其實是根號3):

方法一:原理把正六邊形分成三部分,左中右分別是:before部分,div部分,after部分,如圖:

before三角形部分是div的before偽元素,after三角形部分是div的after偽元素。

html**:

class='

div'>

css**:

.div .div:before .div:after
注意div及偽元素的寬高需要根據上面的公式計算。

方法二:也是把正六邊形分成三個寬高相同的div,然後使用定位以及css3 transform:rotate分別向左右旋轉60deg形成正六邊形,如圖:

以上兩種方法,元素的寬高尺寸以及左右位移需要根據上面的公式計算不能隨意填寫

HTML畫六邊形

1.方法1 上下兩個三角,中間乙個長方形 方法2 t 25deg,transparent 36px,rgb 76,184,233 0 bottom left background size 50 50 background repeat no repeat position absolute lef...

列印正六邊形 C語言

問題描述 編寫乙個程式,輸入乙個正整數n,在螢幕上用 列印以n為邊長的正六邊形。輸入形式 輸入乙個正整數n。輸出形式 螢幕上輸出以n為邊長的正六邊形。樣例輸入 4 樣例輸出 樣例說明 輸入的為乙個正整數,列印輸出乙個以這個正整數為邊長的正六邊形。include intmain printf prin...

六邊形平面

現在有乙個n n的六邊形網格平面 這種平面類似蜂窩形狀 下圖是n 1,2,3,4條件下的具體形狀,根據它們可以依次類推n 5,6,現在你需要對n n網格中一些格仔進行上色,在給定的輸入中這些格仔被標記上字元 x 而不用上色的網格被標記為 上色時需要注意,如果兩個被上色的格仔有公共邊,那麼這兩個格仔需...