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 資料...