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>
將上述的程式改成「多重背景」，將四個放射漸層的圓心分別定位在「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>
漸層色製作四邊形圖案背景
因為漸層色本身沒有四邊形的漸層色，必須透過「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>
修改上述程式碼的「多重背景」，底色使用「圓錐形漸層」製作四色底色，搭配上方線性漸層繪製白色空間，就能產生四色四邊形的圖案效果。
<!-- 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>
漸層色製作三角形圖案背景
三角形的圖案基本上都是透過「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>
四色三角形的背景需要同時使用「圓錐形漸層」和「線性線層」，修改上述程式碼的「多重背景」，底色使用放射漸層製作四色底色，搭配上方兩組傾斜的線性漸層和一組水平線性漸層繪製白色空間，就能產生四色三角形的圖案效果。
<!-- 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>
漸層色製作立體三角形圖案背景
延伸三角形圖案的做法，如果要製作「立體三角形」，則需要使用許多組的圓錐形漸層，採用每「60deg」為一個區塊單位，先繪製最下層 12 個區塊的顏色，接著先遮蔽上下左右，再遮蔽左上、左下、右上和右下，只要將顏色深淺交錯，就能產生立體的三角形圖案背景。
下方範例會產生重複的立體三角形圖案背景。
<!-- 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 的多重漸層色可以組合出各種不同的變化，雖然撰寫程式碼時需要具備填色、角度和圖層的觀念，但卻可以在不用製作圖片的狀況下快速產生背景圖案，是相當有趣實用的技巧。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～