本文簡介

點贊 + 收藏 + 關注 = 學會了

這次會使用css畫出一個格子背景，并且一步步分析如何實作~

file

思路

直接給答案：通過2個相等的直角三角形拼接，形成一個正方形，

三角形可以使用 background-image 的漸變來實作，

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
body {
  background-image: linear-gradient(45deg, #000 25%, transparent 0);
}

file

此時出來的效果如上圖所示，

做一個45度的線性漸變，第一個顏色是#000（黑色），占整個背景貼片的25%，其余部分都是紅色，

在上面的基礎上，用 background-size 來控制背景貼片的大小，

body {
  background-image: linear-gradient(45deg, #000 25%, transparent 0);
  background-size: 200px 200px;
}

file

開始有點想法了嗎？

此時如果我們再畫多一個反過來的黑色的直角三角形，拼在一起不就成了正方形了嗎？

反過來的三角形怎么畫呢？我嘗試將黑色從 25% 改成 75%，會得到以下效果

body {
  background-image: linear-gradient(45deg, #000 75%, transparent 0);
  background-size: 200px 200px;
}

file

可以看到紅色的三角形就是原本黑色三角形反過來的樣子，

把上圖的“白色三角形”變成黑色，原本的黑色三角形（25%）繼續保留，

于是我又加多層漸變~

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #000 0);
  background-size: 200px 200px;
}

file

簡化一下代碼：

body {
  background-image: linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-size: 200px 200px;   
}

最后再做多一層上面的效果，然后移動一下其中一層的位置，就可以合并成一個黑色正方形，

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-position: 0 0, 100px 100px;
  background-size: 200px 200px;
}

file

大功告成，

最后需要提醒的是，在本例中 background-position 第二個漸變的位移是 background-size 的一半，這樣就能實作這種格子背景了~

完整代碼

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    background-image:
      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
    background-position: 0 0, 100px 100px;
    background-size: 200px 200px;
  }
</style>

這是做成背景的完整代碼，

純CSS 格子背景

本文簡介

思路

完整代碼

推薦閱讀