HTML畫六邊形

2021-10-14 06:26:06 字數 1543 閱讀 1836

1.方法1:上下兩個三角,中間乙個長方形

方法2:

t(25deg, transparent 36px, rgb(76, 184, 233) 0) bottom left;background-size: 50% 50%;background-repeat: no-repeat;position: absolute;left: 564px;width: 174px;height: 234px;z-index: 39;\">div

>

實物效果

兩角在左邊

background-size:50% 50%; 第乙個百分比為左右兩側各佔的畫素比例,第二個為上下各自佔的畫素比例

方法三:

用簡單的div配合偽元素,即可『畫出』這幅六邊形,原理是三個相同寬高的div,通過定位旋轉拼合成乙個六邊形,再利用背景圖層疊,形成視覺上的一張整圖。下面咱們一步一步來實現

(1)那麼第一步,當然是繪製容器,容器是乙個有寬高的div。

繪製之前,必須明白乙個問題,那就是,等邊六邊形是通過三個相同寬高的div拼合而成的(如下圖所示),所以div的寬高必須滿足 √3 倍的條件才能拼成乙個正六邊形,這裡就不帶大家計算這個值了,有興趣可以用三角函式私下自己計算一下。

在此處,我設定了外層容器寬為190px, 高為110px, 然後設定背景 。**如下

lang

="en"

>

>

charset

="utf-8"

>

>

documenttitle

>

head

>

css畫正六邊形

說下兩種css 製作正六邊形的方法。先看一下結果 在之前要先了解一下正六邊形內角和邊的關係,正六邊形的每個內角是60deg,如圖 3其實是根號3 方法一 原理把正六邊形分成三部分,左中右分別是 before部分,div部分,after部分,如圖 before三角形部分是div的before偽元素,a...

六邊形平面

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

2701 六邊形點陣

題目描述 description 輸入六邊形的邊長n,請你畫出這個六邊形點陣。輸入描述 input description 僅一行,乙個整數n 輸出描述 output description 六邊形點陣 有兩條邊水平 樣例輸入 sample input 6 樣例輸出 sample output 資料...