css實戰 用css畫乙個中國結

2021-09-13 09:08:17 字數 679 閱讀 7547

大家如果感興趣可以參考我的原始碼：github位址

首先，我們定義好畫中國結需要的結構：
然後開始寫樣式，讓中國結居中顯示：

body
設定裝中國結的容器樣式：

.knot
我把中國結的基礎樣式拆分成4個長方形，首先來定義長方形的基礎樣式：

.box
然後我們來調整每乙個長方形的樣式，把它們組合成結的基礎樣子：

.knot .box:nth-child(1) 


.knot .box:nth-child(2) 


.knot .box:nth-child(3) 


.knot .box:nth-child(4)
最後，我們利用第乙個和第二個長方形的偽元素來畫出餘下的那兩個小圓圈：

.knot .box:nth-child(1)::after 


.knot .box:nth-child(2)::after
大功告成！

CSS 畫乙個心

效果圖 實現原理 可以把這個心分為兩部分，兩個長方形，分別設定 border radius，transform rotate 設定屬性之後 再次新增乙個，設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感，可以設定左邊的 box shadow cssbodydivdi...

CSS 畫乙個心

效果圖 實現原理 可以把這個心分為兩部分，兩個長方形，分別設定 border radius，transform rotate 設定屬性之後 再次新增乙個，設定相反的 rotate 設定其中乙個的 left 值 就成了 為了看起來有立體感，可以設定左邊的 box shadow cssbodydivdi...

Effective前端3 用CSS畫乙個三角形

三角形的場景很常見，開啟乙個頁面可以看到各種各樣的三角形 由於div一般是四邊形，要畫個三角形並不是那麼直觀。你可以貼一張png，但是這種辦法有點low，或者是用svg的形式，但是太麻煩。三角形其實可以用css畫出來。如上圖提到，可以分為兩種三角形，一種是純色的三角形，第二種是有邊框色的三角形，先介...