close
完成圖
基本概念
通常linear-gradient都用來做漸層效果,但如果我們將linear-gradient的配色放在同一位位置上,例如50%、50%,就會去除漸層效果而變成色塊。
background: linear-gradient(90deg, #fff 50%, #000 50%);
產生重複
只要加上background-size就可以了。因為background-repeat的default值會自動產生重複。
background: linear-gradient(90deg, #fff 50%, #000 50%);
background-size: 50px 50px;
轉個角度,可以做成三角形。
background: linear-gradient(45deg, #fff 50%, #000 50%);
background-size: 50px 50px;
再調整一下顏色參數,鏘鏘,斜條紋。
background: linear-gradient(45deg, #fff 25%, #000 25%, #000 50%, #fff 50%, #fff 75%, #000 75%);
background-size: 50px 50px;
畫棋盤
我們現在要進入重頭戲啦!棋盤要怎麼畫呢?首先,你要做出這種線條,配色為「顏色 > 透明 > 透明 > 顏色」。
background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
background-size: 50px 50px;
接下來,我們把它複製一份,然後移動到合適的位置。為了方便說明,我們用另一個顏色表示。
程式碼和實際效果:
background: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%), linear-gradient(45deg,#000 25%, transparent 25%, transparent 75%, #000 75%);
background-size: 50px 50px;
background-position: 0 0, 25px 25px;
如果要把白色換成其他顏色,在父元素下CSS就行了。
background: #fff;
更多運用
參考資料
全站熱搜
留言列表