話不多說，上圖為敬

程式碼貼上（html程式碼就一個container，沒寫的）

body{
  background: #243960;
}
.container{
  margin: 200px auto;
  width: 500px;
  height: 500px;
  background: linear-gradient(
        45deg, 
        rgba(0, 153, 68, .5) 0, rgba(0, 153, 68, .5) 25%, transparent 25%, transparent 50%, 
        rgba(0, 153, 68, .5) 50%, rgba(0, 153, 68, .5) 75%, transparent 75%, transparent
      );
  background-size: 50px 50px;
}
 

接下來一個一個解析：

margin, width, height 這塊自己隨意定義，關鍵屬性有兩個——background中的linear-gradient 和 background-size。

先來linear-gradient,分析其屬性，總共有9個屬性

45deg外加8個後接百分比的顏色值。

45deg表示條紋傾斜角度，這個好理解。如果不加這個屬性，就成了橫條紋了，以此90deg就是豎條紋，可以組成花格條紋。

分析後面8個屬性，總結出是由一個rgba顏色值和transparent外加百分比組成。

rgba顏色值是條紋的顏色，transparent其實也是顏色，不過是繼承自父級的，而這裡的父級顏色就是body的背景色（在這塊程式碼裡可以理解為無色透明≈rgba(0,0,0,0)）。

而百分比也比較好理解，不過需要串起來讀：

0-25% 是 條紋色
25%-50% 是 父級顏色
50%-75% 是 條紋色
75%-100% 是 父級顏色

這裡的細節最後一個transparent後沒接百分比其實是表示transparent 1，也就是100%了。注：如果沒有寫角度屬性，渲染是從top開始的，如果寫的是0deg是從bottom開始的，角度值增加多少，則渲染開始點順時針旋轉多少。

接下來講道理了，按照這個邏輯，那我們渲染的圖片應該是這個樣的

怎麼成了第一張圖的模樣了？其實關鍵點是在後面一個屬性background-size，以及預設值為repeat的background-repeat。

使用background-size: 50px 50px;就把上圖的樣式縮小到了50*50的方格子中。然後這樣是無法鋪滿500*500的容器，另外background-repeat的預設repeat發揮作用，把渲染好的50*50方格子平鋪重複渲染到500*500的容器裡面。就做成了第一張圖的效果。

瞭解到每個屬性的作用，拓展起來就方便多了，如果要改變斜條紋線條的大小，只需要改變background-size的大小就行了。顏色也不一定要用rgba格式，另外如果要做雙色條紋也只需要把transparent改成另外一個顏色就ok。三色條紋也簡單

50% ÷ 3 ≈ 16.66%

所以程式碼是：

.container{
  margin: 200px auto;
  width: 500px;
  height: 500px;
  background: linear-gradient(
        45deg, 
        red 0, red 16.66%, #fff000 16.66%, #fff000 33.33%, rgb(0, 0, 255) 33.33%, rgb(0, 0, 255) 50%,
        red 50%, red 66.66%, #fff000 66.66%, #fff000 83.33%, rgb(0, 0, 255) 83.33%, rgb(0, 0, 255)
      );
  background-size: 50px 50px;
}

效果太辣眼睛就不貼了。

關於斜條紋就暫時到這裡了，如果後期有更好玩的會持續更新