小说排行榜,好看的课外书

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

錐形漸變只能畫(huà)圓錐嗎？Conic-gradient十大應(yīng)用舉例

提到錐形漸變conic-gradient[1]（也有的稱“角向漸變”），很多人都被這個(gè)名稱給迷惑了，以為就是用來(lái)畫(huà)圓錐的，比如：

成都創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),固鎮(zhèn)企業(yè)網(wǎng)站建設(shè),固鎮(zhèn)品牌網(wǎng)站建設(shè),網(wǎng)站定制,固鎮(zhèn)網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷,網(wǎng)絡(luò)優(yōu)化,固鎮(zhèn)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

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

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

當(dāng)然，再進(jìn)一步，可以繪制餅圖。

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

這個(gè)也比較容易想到，如下：

這類錐形都比較直觀，除了這些，還能繪制哪些圖案呢？下面就來(lái)介紹一些比較實(shí)用的案例。

一、三角形

在錐形漸變出來(lái)之前，用線性漸變也能實(shí)現(xiàn)三角形，但只能繪制直角三角形，例如：

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

可以得到這樣的圖形。

如果想要一個(gè)這樣的三角形。

那只能用兩個(gè)直角三角形拼接了，就像這樣。

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

用代碼實(shí)現(xiàn)就是：

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

像之前??這篇文章??中的小三角就可以用這個(gè)方式來(lái)繪制

二、箭頭符號(hào)

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

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

可以得到這樣的圖形。

再繪制一個(gè)反向鏤空的三角（三角是透明的）。

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

為了區(qū)分，換個(gè)顏色。

接下來(lái)，改變一下兩者的位置，組合起來(lái)。

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

效果如下：

最后水平方向平鋪，并且改成相同的顏色，就能得到這樣的箭頭符號(hào)。

三、河流符號(hào)

這個(gè)比較簡(jiǎn)單，在上面的基礎(chǔ)上，垂直方向上平鋪就行了，需要調(diào)節(jié)垂直尺寸。

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

這是30px的效果：

這是40px的效果：

CSSBattle[2]中有一個(gè)就是類似這樣的圖案，可以參考一下：

四、角標(biāo)效果

這是一個(gè)四周都有個(gè)三角形的角標(biāo)效果：

如果是線性漸變，我們可能需要 4 個(gè)漸變才能完成，但如果是錐形漸變，我們只需要兩個(gè)就行了，下面是實(shí)現(xiàn)過(guò)程：

先畫(huà)一個(gè)三角。

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

和上面一樣。

默認(rèn)情況下，錐形漸變中心是畫(huà)布正中心，也就是50% 50%的地方，我們可以手動(dòng)指定中心點(diǎn)位置，需要用到at關(guān)鍵詞。

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

這就將整個(gè)圖形的移到了左上角。

然后改變整個(gè)背景圖形的位置，向左偏移10px。

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

利用背景的重復(fù)平鋪，一個(gè)三角形就被拆分成了兩個(gè)小三角形。

有點(diǎn)看不明白？下面是一個(gè)動(dòng)畫(huà)演示（虛線表示視區(qū)范圍）

然后用同樣的方式，畫(huà)出下面的兩個(gè)角標(biāo)，完整代碼如下：

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;
}

這樣就得到了三角形角標(biāo)的效果，并且這個(gè)跟容器尺寸無(wú)關(guān)，完全是自適應(yīng)的。

五、矩形、正方形

還可以通過(guò)錐形漸變繪制矩形。

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

這樣就能得到一個(gè)矩形。

還可以通過(guò)改變中心點(diǎn)和起始角度，繪制不同位置、不同大小的矩形。

比如起始角度是-90deg。

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

起始角度是180deg。

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

這個(gè)應(yīng)該比較容易，相比線性漸變而言，錐形漸變可以做的更多，下面看一些應(yīng)用。

六、正方形角標(biāo)

和前面三角形角標(biāo)比較類似，只是角標(biāo)是正方形的。

這個(gè)用錐形漸變就非常簡(jiǎn)單了。

首先是繪制一個(gè)正方形。

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

然后將中心點(diǎn)移到左上方。

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

這樣可以得到一個(gè)尺寸固定的正方形（20px * 20px），因?yàn)橹行狞c(diǎn)在這里。

最后一步，改變一下背景尺寸就行了，默認(rèn)是 100% * 100%，原理如下：

用代碼實(shí)現(xiàn)就是：

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

這樣借助背景平鋪，自然就實(shí)現(xiàn)了下面的效果：

七、棋盤(pán)

錐形漸變還能輕易的實(shí)現(xiàn)棋盤(pán)效果：

之前在這篇文章文章有詳細(xì)介紹：CSS 實(shí)現(xiàn)透明方格的 3 種方式[3]。

原理非常簡(jiǎn)單，創(chuàng)建兩段透明間隔的漸變就行了。

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

原理示意如下：

八、虛線網(wǎng)格

有時(shí)候需要這樣的虛線背景，也可以用錐形漸變實(shí)現(xiàn)。

之前在這篇文章中有詳細(xì)介紹，有興趣可以參考：CSS & SVG 繪制寫(xiě)作網(wǎng)格線的3種方式[4]。^?

原理和前面幾乎一致，需要改變中心點(diǎn)位置，然后設(shè)置背景尺寸，示意如下：

具體細(xì)節(jié)這里就不重復(fù)了，完整實(shí)現(xiàn)如下：

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

九、十字線背景

將兩個(gè)方向上的虛線疊加就能得到十字線背景。

完整實(shí)現(xiàn)如下：

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;
}

十、折線角標(biāo)

最后看這樣一個(gè)例子：

仔細(xì)觀察，其實(shí)和前面的三角形形角標(biāo)比較類似，只是三角形變成了折角，根據(jù)前面的思路，反向思考，這四個(gè)角其實(shí)可以合并成一個(gè)十字形，如下：

而十字形可以根據(jù)前面的方式得到，完整實(shí)現(xiàn)如下：

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 和總結(jié)

以上介紹了錐形漸變10個(gè)比較實(shí)用的案例，以后就別以為錐形漸變僅僅只能畫(huà)圓錐了，上面 10 個(gè) demo 我都整合在一個(gè)鏈接上了：

CSS conic-gradient (juejin.cn)^[5]
CSS conic-gradient (codepen.io)^[6]
CSS conic-gradient (runjs.work)^[7]

為啥要通過(guò) CSS 繪制？CSS 繪制意味著尺寸都是動(dòng)態(tài)可控的，可以完美適配容器的各種尺寸，而且顏色也可以隨時(shí)更換。如果你需要的圖形是固定的，不需要考慮自適應(yīng)，也不需要改變顏色，大可以采用切圖的方式，當(dāng)然也可以通過(guò) CSS 繪制來(lái)學(xué)習(xí)、提升自己的CSS水平。

參考資料

[1]conic-gradient: ??https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/conic-gradient。

[2]CSSBattle: ??https://cssbattle.dev/。

[3]CSS 實(shí)現(xiàn)透明方格的 3 種方式: ??https://juejin.cn/post/7072175448301994020。

[4]CSS & SVG 繪制寫(xiě)作網(wǎng)格線的3種方式: ??https://juejin.cn/post/7186524908464111676。

[5]CSS conic-gradient (juejin.cn): ??https://code.juejin.cn/pen/7211798260330496057。

[6]CSS conic-gradient (codepen.io): ??https://codepen.io/xboxyan/pen/ExepNwL。

[7]CSS conic-gradient (runjs.work): ??https://runjs.work/projects/de622c59efd94903。

分享題目：錐形漸變只能畫(huà)圓錐嗎？Conic-gradient十大應(yīng)用舉例
當(dāng)前URL：http://m.fisionsoft.com.cn/article/cdjgcjj.html

新聞中心

一、三角形

二、箭頭符號(hào)

三、河流符號(hào)

四、角標(biāo)效果

五、矩形、正方形

六、正方形角標(biāo)

七、棋盤(pán)