FrankStudio官方部落格

完成圖

基本概念

通常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;

更多運用

參考資料

CSS Design Essentials Volume # 2