Css3之五邊形跟六邊形

2021-09-26 09:21:10 字數 797 閱讀 2514

今天我們來討論下如果做五邊形跟六邊形,五邊形可以拆成梯形跟三角形組合起來(還有個思路就是三個三角形,兩個鈍角的,然後通過transform旋轉得到五邊形,這個大家自己去試試),六邊形可以拆成兩個三角形和乙個長方形

我們先來了解下梯形如何做

梯形

.trapezoid
有沒有發現做梯形跟做三角形的**差不多,就把width設定為50px,梯形要做高點,就把兩邊的值設定小點border-right: 20px solid transparent;border-left: 20px solid transparent;

五邊形

/*五邊形*/

.pentagon

/*三角形*/

.pentagon::before

六邊形

/*六邊形*/

.hexagon

.hexagon::before

.hexagon::after

六邊形平面

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

css畫正六邊形

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

2701 六邊形點陣

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