春節是中國人最重要的節日，春節期間的習俗也非常多，東西南北各不相同。 為瞭增添年味，過年時傢傢戶戶會置辦各種年貨和裝飾品，把傢裡營造得紅紅火火，紅燈籠，紅對聯，紅福字，以及紅色的中國結。

那麼如何用CSS來實現一個中國結呢？先看最終效果

一、編碼之前

1. 搜集素材，越簡潔越好

先從網上搜一張中國結的圖片，中國結的樣式不止一種，我們選擇一種最經典的中國結的編織樣式。 圖片的質量決定瞭最後成品的質量，下面就是一張比較整潔，結構清晰的中國結圖片。供我們寫CSS時參考使用

2. 觀察細節，構思實現的可能性 有瞭圖片就可以開始寫代碼瞭嗎？當然不是。 首先回想一下現在要做的事：用CSS畫個中國結。 你真的想好瞭嗎？這是一個可以實現的目標嗎？想象一下，當你的領導給你佈置一個任務：讓手機殼根據APP的主題色而變色。你會直接開始寫代碼嗎？ 你會想兩個問題：

1. APP作為一個軟件，是否有和手機殼互動的接口
2. 手機殼如果接收到色值，如何變色

這是一個比較極端的例子，上面兩條都無法實現。回到CSS和這張中國結的圖片。我們首先要想的是，我們應該用哪些CSS技術，來實現這個圖片。你現在回過頭仔細觀察一下上面的圖片。 經過短暫的觀察，我們發現這樣一些要點：

1. 中國結的繩子是由漸變色組成，深紅，淺紅，深紅
2. 中間的主體部分由22根相互交叉的繩子組合而成，而且每過一個交叉點就會交換一下層級順序
3. 有一些環狀結構，顏色漸變的過程與直線相同
4. 整體都是紅色，以黃色點綴

然後就是預想一下實現原理：

1. 直線的顏色漸變，使用 linear-gradient 或者 repeating-linear-gradient
2. 環狀漸變，使用 radial-gradient
3. 網格的交叉，使用 mask 遮罩來達到交叉效果
4. 四分之三環以及底部兩根彎曲的繩子使用 clip-path 來裁剪
5. 為瞭使編碼更方便，采用 SCSS
6. 許多地方可以使用 ::before ::after 實現，減少html代碼

3. 結構拆分，化整為零 上面是從技術角度從整體觀察，下面就是對整個圖片進行拆分，先確定其 html 結構。

• 中間像棋盤一樣的網格結構，可以作為一個 html 標簽

• 四周16個小半圓，使用16個標簽定位實現

d97272a93de7f6204cb4fdd93b5a7fcf

• 兩個四分之三圓，放在一組裡，使用相同的樣式，第二個基於第一個旋轉180deg

067716c45d2cc3b7b23539f3576969bd

• 兩個十字結，樣式一樣，所以也放在一組裡

• 頂部三個小結構，放在一組，外層命名為header

f06b05cec7663aaa4d0c3a1ea6fee10c

• 底部左右兩部分高度相似，也放在一組，命名為footer

這樣我們得到瞭 html 的結構。