CSS 錐形漸變只能畫圓錐嗎？conic-gradient 10大應用舉例

XboxYan發表於2023-03-26
CSS
歡迎關注我的公眾號：前端偵探

提到錐形漸變conic-gradient（也有的稱“角向漸變”），很多人都被這個名稱給迷惑了，以為就是用來畫圓錐的，比如

div {
  background-image: conic-gradient(from 40deg, #fff, #000);
}

這樣可以得到錐形的放射性圖案

image.png

當然，再進一步，可以繪製餅圖

div {
  background: conic-gradient(
     red 36deg, orange 36deg 170deg, yellow 170deg);
  border-radius: 50%
}

這個也比較容易想到，如下

image.png

這類錐形都比較直觀，除了這些，還能繪製哪些圖案呢？下面就來介紹一些比較實用的案例。

一、三角形

在錐形漸變出來之前，用線性漸變也能實現三角形，但只能繪製直角三角形，例如

div{
  background: linear-gradient( -45deg, royalblue 50%, transparent 0);
}

可以得到這樣的圖形

image.png

如果想要一個這樣的三角形

image.png

那隻能用兩個直角三角形拼接了，就像這樣

image.png

如果是用錐形漸變，就可以直接一層漸變搞定，比如上面這個，起始角度是 -45deg，漸變了90deg，示意如下

Kapture 2023-03-18 at 14.01.10.gif

用程式碼實現就是

div{
  background: conic-gradient( from -45deg, royalblue 90deg, transparent 0deg);
}

像之前這篇文章中的小三角就可以用這個方式來繪製

image.png

二、箭頭符號

image.png

將三角形改變一下角度，比如

div{
  background: conic-gradient(from 30deg, royalblue 120deg, transparent 0deg);
  background-size: 40px 60px;
  background-repeat: no-repeat;
}

可以得到這樣的圖形

image.png

再繪製一個反向鏤空的三角（三角是透明的）

div{
  background: conic-gradient(from 30deg at 0 50%, transparent 120deg, royalblue 0deg);
  background-size: 40px 60px;
  background-repeat: no-repeat;
}

為了區分，換個顏色

image.png

接下來，改變一下兩者的位置，組合起來

div{
  background-position: 20px 50%, -20px 50%;
}

效果如下

image.png

最後水平方向平鋪，並且改成相同的顏色，就能得到這樣的箭頭符號

image.png

三、河流符號

image.png

這個比較簡單，在上面的基礎上，垂直方向上平鋪就行了，需要調節垂直尺寸

div{
  background-size: 40px 30px;
}

這是30px的效果

image.png

這是40px的效果

image.png

CSSBattle中有一個就是類似這樣的圖案，可以參考一下

image.png

四、角標效果

這是一個四周都有個三角形的角標效果

image.png

如果是線性漸變，我們可能需要 4 個漸變才能完成，但如果是錐形漸變，我們只需要兩個就行了，下面是實現過程：

先畫一個三角

div{
  background: conic-gradient( from -45deg,  royalblue 90deg, transparent 0deg);
}

和上面一樣

image.png

預設情況下，錐形漸變中心是畫布正中心，也就是50% 50%的地方，我們可以手動指定中心點位置，需要用到at關鍵詞

div{
  background: conic-gradient( from -45deg at 10px 10px,  royalblue 90deg, transparent 0deg);
}

這就將整個圖形的移到了左上角

image.png

然後改變整個背景圖形的位置，向左偏移10px

div{
  background: conic-gradient( from -45deg at 10px 10px,  royalblue 90deg, transparent 0deg);
  background-position: -10px 0;
}

利用背景的重複平鋪，一個三角形就被拆分成了兩個小三角形

image.png

有點看不明白？下面是一個動畫演示（虛線表示視區範圍）

Kapture 2023-03-18 at 13.41.02.gif

然後用同樣的方式，畫出下面的兩個角標，完整程式碼如下

div{
  background: conic-gradient( from -45deg at 10px 10px,  royalblue 90deg, transparent 0deg),
    conic-gradient( from 135deg at left 10px bottom 10px,  royalblue 90deg, transparent 0deg);
  background-position: -10px 0;
}

這樣就得到了三角形角標的效果，並且這個跟容器尺寸無關，完全是自適應的

Kapture 2023-03-18 at 14.05.04.gif

五、矩形、正方形

還可以透過錐形漸變繪製矩形。

div{
  background: conic-gradient(  royalblue 90deg, transparent 0deg);
}

這樣就能得到一個矩形

image.png

還可以透過改變中心點和起始角度，繪製不同位置、不同大小的矩形

比如起始角度是-90deg

div{
  background: conic-gradient( from -90deg, royalblue 90deg, transparent 0deg);
}

image.png

起始角度是180deg

div{
  background: conic-gradient( from -90deg, royalblue 90deg, transparent 0deg);
}

image.png

這個應該比較容易，相比線性漸變而言，錐形漸變可以做的更多，下面看一些應用

六、正方形角標

和前面三角形角標比較類似，只是角標是正方形的

image.png

這個用錐形漸變就非常簡單了

首先是繪製一個正方形

div{
  background: conic-gradient( from -90deg, royalblue 90deg, transparent 0deg);
}

image.png

然後將中心點移到左上方

div{
  background: conic-gradient( from -90deg at 20px 20px, royalblue 90deg, transparent 0deg);
}

這樣可以得到一個尺寸固定的正方形（20px * 20px），因為中心點在這裡

image.png

最後一步，改變一下背景尺寸就行了，預設是 100% * 100%，原理如下

image.png

用程式碼實現就是

div{
  background: conic-gradient( from -90deg at 20px 20px, royalblue 90deg, transparent 0deg);
    background-size: calc(100% - 20px) calc(100% - 20px);
}

這樣藉助背景平鋪，自然就實現了下面的效果

image.png

七、棋盤

錐形漸變還能輕易的實現棋盤效果

之前在這篇文章文章有詳細介紹：CSS 實現透明方格的 3 種方式

原理非常簡單，建立兩段透明間隔的漸變就行了

div{
  background: conic-gradient(  royalblue 90deg, transparent 0deg 180deg, royalblue 180deg 270deg, transparent 0deg);
  background-size: 20px 20px;
}

image.png

原理示意如下

Kapture 2022-02-25 at 15.30.13.gif

八、虛線網格

有時候需要這樣的虛線背景，也可以用錐形漸變實現

之前在這篇文章中有詳細介紹，有興趣可以參考：CSS & SVG 繪製寫作網格線的3種方式

image.png

原理和前面幾乎一致，需要改變中心點位置，然後設定背景尺寸，示意如下

image.png

具體細節這裡就不重複了，完整實現如下

div{
  background: conic-gradient( from -90deg at 10px 4px,  royalblue 90deg, transparent 0deg);
  background-size: 30px 30px;
}

九、十字線背景

將兩個方向上的虛線疊加就能得到十字線背景

image.png

完整實現如下

div{
  background: conic-gradient( from -90deg at 10px 4px,  royalblue 90deg, transparent 0deg),
      conic-gradient( from -90deg at 4px 10px,  royalblue 90deg, transparent 0deg);
  background-size: 30px 30px;
  background-position: 0 3px, 3px 0;
}

十、折線角標

最後看這樣一個例子

image.png

仔細觀察，其實和前面的三角形角標比較類似，只是三角形變成了折角，根據前面的思路，反向思考，這四個角其實可以合併成一個十字形，如下

image.png

而十字形可以根據前面的方式得到，完整實現如下

div{
  background: conic-gradient( from -90deg at 20px 8px,  royalblue 90deg, transparent 0deg),
      conic-gradient( from -90deg at 8px 20px,  royalblue 90deg, transparent 0deg);
  background-position: -10px -4px, -4px -10px;
}

十一、demo 和 總結

以上介紹了錐形漸變10個比較實用的案例，以後就別以為錐形漸變僅僅只能畫圓錐了，上面 10 個 demo 我都整合在一個連結上了：

為啥要透過 CSS 繪製？CSS 繪製意味著尺寸都是動態可控的，可以完美適配容器的各種尺寸，而且顏色也可以隨時更換。如果你需要的圖形是固定的，不需要考慮自適應，也不需要改變顏色，大可以採用切圖的方式，當然也可以透過 CSS 繪製來學習、提升自己的CSS水平。最後，如果覺得還不錯，對你有幫助的話，歡迎點贊、收藏、轉發❤❤❤

歡迎關注我的公眾號：前端偵探

相關文章