iT邦幫忙

2025 iThome 鐵人賽
DAY 7
1
Modern Web

關於那些有趣的 CSS 效果系列 第 7 篇

( Day 7 ) 純 CSS 漸層色製作圖案背景

17th鐵人賽 css css教學
559 瀏覽

  • 分享至 

  • xImage
    •  

某天看著圍牆上重複且整齊劃一的幾何圖案，突然靈光乍現，這些圖案能不能運用 CSS 來完成呢？多番思量想家鄉，腦中靈光忽閃亮，漸層色彩鋪成景，花樣背景美非常。 ( 不知道在唸什麼... )

正文開始

這篇教學會將 CSS 的線性漸層、放射漸層和圓錐形漸層互相搭配組合，運用多重背景的方式產生圓點圖案、正方形圖案、三角形圖案和立體三角形圖案背景。

CSS 教學 - CSS 漸層色製作圖案背景

漸層色製作圓形圖案背景

運用漸層色的「radial-gradient() 放射漸層」搭配 background-size 背景尺寸，就能快速做出「圓形」的圖案背景，下方的範例會展示單純的放射漸層、改變水平尺寸、改變垂直尺寸以及同時改變水平垂直尺寸的效果。

<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 1px solid #000;
    background: radial-gradient(#f00 30%, #0000 30%); /* 放射漸層背景，紅色和透明色 */
  }
  .a {background-size: 50px;}      /* 水平 50px，垂直 auto */
  .b {background-size: auto 50px;} /* 水平 auto，垂直 50px */
  .c {background-size: 50px 50px;} /* 水平 50px，垂直 50px */
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作圓形圖案背景

將上述的程式改成「多重背景」，將四個放射漸層的圓心分別定位在「25% 25%」「75% 25%」「75% 75%」和「25% 75%」的位置，就能產生四個不同顏色圓點的圖案背景 ( 注意，主要顏色需要搭配透明色，才不會互相干擾 )。

<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    margin: 10px;
    float: left;
    border: 1px solid #000;
    /* 多重背景，使用主要顏色 + 透明色 */
    background: radial-gradient(at 25% 25%, #f00 10%, #0000 10%),
      radial-gradient(at 75% 25%, #0c0 10%, #0000 10%),
      radial-gradient(at 75% 75%, #06f 10%, #0000 10%),
      radial-gradient(at 25% 75%, #fc0 10%, #0000 10%);
  }
  .a {background-size: 50px;}      /* 水平 50px，垂直 auto */
  .b {background-size: auto 50px;} /* 水平 auto，垂直 50px */
  .c {background-size: 50px 50px;} /* 水平 50px，垂直 50px */
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作多色圓形圖案背景

漸層色製作四邊形圖案背景

因為漸層色本身沒有四邊形的漸層色，必須透過「linear-gradient() 線性線層」搭配 background-size 背景尺寸，用顏色違繞出四邊形，圍繞的過程中需要注意最後一個漸層色 ( 最下方的漸層色 ) 不需要透明色，擺放在上層的漸層色需要使用透明色。

<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    background: linear-gradient(
      #fff 0%, #fff 20%, 
      #f000 20%, #f000 80%,
      #fff 80%),
      linear-gradient(to right,
      #fff 0%, #fff 20%, 
      #f00 20%, #f00 80%,
      #fff 80%);
    margin: 10px;
    float: left;
  }
  .a {background-size: 50px;}
  .b {background-size: auto 50px;}
  .c {background-size: 50px 50px;}
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作四邊形圖案背景

修改上述程式碼的「多重背景」，底色使用「圓錐形漸層」製作四色底色，搭配上方線性漸層繪製白色空間，就能產生四色四邊形的圖案效果。

<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    /* conic-gradient 負責製作四個象限四種顏色，linear-gradient 負責產生白邊 */
    background: 
      linear-gradient(to right, 
        #fff 0%, #fff 15%,
        #0000 15%, #0000 35%,
        #fff 35%, #fff 65%,
        #0000 65%, #0000 85%, 
        #fff 85%, #fff 100%),
      linear-gradient(to bottom, 
        #fff 0%, #fff 15%,
        #0000 15%, #0000 35%,
        #fff 35%, #fff 65%,
        #0000 65%, #0000 85%, 
        #fff 85%, #fff 100%),
      conic-gradient(
        #f00 0, #f00 90deg,
        #fc0 90deg, #fc0 180deg,
        #0c0 180deg, #0c0 270deg,
        #09f 270deg, #09f 360deg);
    margin: 10px;
    float: left;
  }
  .a {background-size: 50px;}
  .b {background-size: auto 50px;}
  .c {background-size: 50px 50px;}
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作多色四邊形圖案背景

漸層色製作三角形圖案背景

三角形的圖案基本上都是透過「linear-gradient() 線性線層」搭配 background-size 背景尺寸所實現，用顏色違繞出三角形，圍繞的過程中需要注意最後一個漸層色 ( 最下方的漸層色 ) 不需要透明色，擺放在上層的漸層色需要使用透明色。

<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    /* 三個方向的線性漸層包覆出一個三角形 */
    background: linear-gradient(#f000 65%, #fff 65%),
      linear-gradient(60deg, #f000 60%, #fff 60%),
      linear-gradient(-60deg, #f00 60%, #fff 60%);
    margin: 10px;
    float: left;
  }
  .a {background-size: 50px;}
  .b {background-size: auto 50px;}
  .c {background-size: 50px 50px;}
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作三角形圖案背景

四色三角形的背景需要同時使用「圓錐形漸層」和「線性線層」，修改上述程式碼的「多重背景」，底色使用放射漸層製作四色底色，搭配上方兩組傾斜的線性漸層和一組水平線性漸層繪製白色空間，就能產生四色三角形的圖案效果。

html >>>>
<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px;
    border: 1px solid #000;
    /* 最上方是水平白色線，中間兩層為交錯斜白色線，底層為四塊顏色的放色漸層 */
    background: linear-gradient(0deg,
        #fff   0%,    #fff   12.5%, 
        #fff0  12.5%, #fff0  25%,
        #fff   25%,   #fff   62.5%,
        #fff0  62.5%, #fff0  75%,
        #fff   75%,   #fff   100%
      ),
      linear-gradient(-45deg,
        #fff   0%,    #fff   12.5%, 
        #fff0  12.5%, #fff0  25%,
        #fff   25%,   #fff   37.5%,
        #fff0  37.5%, #fff0  50%,
        #fff   50%,   #fff   62.5%,
        #fff0  62.5%, #fff0  75%,
        #fff   75%,   #fff   87.5%,
        #fff0  87.5%, #fff0  100%
      ),
      linear-gradient(45deg,
        #fff   0%,    #fff   12.5%, 
        #fff0  12.5%, #fff0  25%,
        #fff   25%,   #fff   37.5%,
        #fff0  37.5%, #fff0  50%,
        #fff   50%,   #fff   62.5%,
        #fff0  62.5%, #fff0  75%,
        #fff   75%,   #fff   87.5%,
        #fff0  87.5%, #fff0  100%
      ),
      conic-gradient(
          #f00 0deg,   #f00 90deg,
          #fc0 90deg,  #fc0 180deg,
          #0c0 180deg, #0c0 270deg,
          #09f 270deg, #09f 360deg);
    margin: 10px;
    float: left;
  }
  .a {background-size: 50px;}
  .b {background-size: auto 50px;}
  .c {background-size: 50px 50px;}
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作多色三角形圖案背景

漸層色製作立體三角形圖案背景

延伸三角形圖案的做法，如果要製作「立體三角形」，則需要使用許多組的圓錐形漸層，採用每「60deg」為一個區塊單位，先繪製最下層 12 個區塊的顏色，接著先遮蔽上下左右，再遮蔽左上、左下、右上和右下，只要將顏色深淺交錯，就能產生立體的三角形圖案背景。

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作立體三角形圖案背景

下方範例會產生重複的立體三角形圖案背景。

<!-- HTML 程式碼 -->
<div></div>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 231px;
    height: 200px;
    border: 1px solid #000;
    --c0: #000;
    --c1: #111;
    --c2: #222;
    --c3: #333;
    --c4: #444;
    --c5: #555;
    --c6: #666;
    --c7: #777;
    --c9: #999;
    background:conic-gradient(at 25% 100%,
        #0000  0deg, #0000 270deg,
        var(--c5) 270deg,  var(--c5) 300deg,
        var(--c2) 300deg,  var(--c2) 330deg,
        #0000  330deg
      ),
      conic-gradient(at 75% 100%,
        #0000  0deg, #0000 30deg,
        var(--c5) 30deg,  var(--c5) 60deg,
        var(--c2) 60deg,  var(--c2) 90deg,
        #0000  90deg
      ),
      conic-gradient(at 75% 0%,
        var(--c2) 0deg,   var(--c2) 120deg,
        var(--c5) 120deg, var(--c5) 150deg,
        #0000  150deg
      ),
      conic-gradient(at 25% 0%,
        #0000 0deg, #0000 210deg,
        var(--c2) 210deg,   var(--c2) 240deg,
        var(--c5) 240deg,   var(--c5) 360deg
      ),
      conic-gradient(at 25% 33.33%,
        #0000 0deg, #0000 240deg,
        var(--c6) 240deg
      ),
      conic-gradient(at 25% 66.66%,
        #0000 0deg, #0000 180deg,
        var(--c4) 180deg,   var(--c4) 300deg,
        #0000 300deg
      ),
      conic-gradient(at 50% 84%,
        #0000 0deg, #0000 120deg,
        var(--c1) 120deg,   var(--c1) 240deg,
        #0000 240deg
      ),
      conic-gradient(at 75% 66.66%,
        #0000 0deg, #0000 60deg,
        var(--c2) 60deg,   var(--c2) 180deg,
        #0000 180deg
      ),
      conic-gradient(at 75% 33.33%,
        var(--c2) 0deg,   var(--c2) 120deg,
        #0000 120deg
      ),
      conic-gradient(at 50% 16.67%,
        var(--c5) 0deg,   var(--c5) 60deg,
        #0000 60deg, #0000 300deg,
        var(--c5) 300deg
      ),
      conic-gradient(
        var(--c2) 0deg,   var(--c2) 30deg,
        var(--c5) 30deg,  var(--c5) 60deg,
        var(--c3) 60deg,  var(--c3) 90deg,
        var(--c4) 90deg,  var(--c4) 120deg,
        var(--c2) 120deg, var(--c2) 150deg,
        var(--c4) 150deg, var(--c4) 180deg,
        var(--c2) 180deg, var(--c2) 210deg,
        var(--c5) 210deg, var(--c5) 240deg,
        var(--c3) 240deg, var(--c3) 270deg,
        var(--c4) 270deg, var(--c4) 300deg,
        var(--c2) 300deg, var(--c2) 330deg,
        var(--c4) 330deg, var(--c4) 360deg);
    margin: 10px;
    float: left;
  }
  .a {background-size: 50px;}
  .b {background-size: auto 50px;}
  .c {background-size: 57px 50px;}
</style>

CSS 教學 - CSS 漸層色製作圖案背景 - 漸層色製作立體三角形圖案背景

小結

CSS 的多重漸層色可以組合出各種不同的變化，雖然撰寫程式碼時需要具備填色、角度和圖層的觀念，但卻可以在不用製作圖片的狀況下快速產生背景圖案，是相當有趣實用的技巧。


上一篇
( Day 6 ) 純 CSS 漸層色邊框
下一篇
( Day 8 ) 純 CSS 漸層色製作星空背景
系列文
關於那些有趣的 CSS 效果 共 35 篇
  1. 31
    ( Day 31 ) 純 CSS 的多種按鈕 hover 效果
  2. 32
    ( Day 32 ) 純 CSS 點擊展開或收折的選單
  3. 33
    ( Day 33 ) 純 CSS 點擊愛心圖案的放射效果
  4. 34
    ( Day 34 ) 純 CSS 數字進度條 ( 會動呦 )
  5. 35
    ( Day 35 ) 純 CSS 碼表 ( 可計時 )
完整目錄
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
iThome鐵人賽
參賽組數
416 組
團體組數
14 組
累計文章數
3134 篇
最後報名日
9/15
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 17th鐵人賽 windows php c# windows server linux css react
熱門問題
熱門回答
熱門文章
IT邦幫忙