建站
咨詢
售后
建站咨詢
新聞中心
提到錐形漸變conic-gradient[1]（也有的稱“角向漸變”），很多人都被這個名稱給迷惑了，以為就是用來畫圓錐的，比如：
成都創(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è)報價,網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,固鎮(zhèn)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(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%
}這個也比較容易想到，如下：
這類錐形都比較直觀，除了這些，還能繪制哪些圖案呢？下面就來介紹一些比較實用的案例。
一、三角形
在錐形漸變出來之前，用線性漸變也能實現(xiàn)三角形，但只能繪制直角三角形，例如：
div{
background: linear-gradient( -45deg, royalblue 50%, transparent 0);
}可以得到這樣的圖形。
如果想要一個這樣的三角形。
那只能用兩個直角三角形拼接了，就像這樣。
如果是用錐形漸變，就可以直接一層漸變搞定，比如上面這個，起始角度是 -45deg，漸變了90deg，示意如下：
用代碼實現(xiàn)就是：
div{
background: conic-gradient( from -45deg, royalblue 90deg, transparent 0deg);
}像之前??這篇文章??中的小三角就可以用這個方式來繪制
二、箭頭符號
將三角形改變一下角度，比如：
div{
background: conic-gradient(from 30deg, royalblue 120deg, transparent 0deg);
background-size: 40px 60px;
background-repeat: no-repeat;
}可以得到這樣的圖形。
再繪制一個反向鏤空的三角（三角是透明的）。
div{
background: conic-gradient(from 30deg at 0 50%, transparent 120deg, royalblue 0deg);
background-size: 40px 60px;
background-repeat: no-repeat;
}為了區(qū)分，換個顏色。
接下來，改變一下兩者的位置，組合起來。
div{
background-position: 20px 50%, -20px 50%;
}效果如下：
最后水平方向平鋪，并且改成相同的顏色，就能得到這樣的箭頭符號。
三、河流符號
這個比較簡單，在上面的基礎(chǔ)上，垂直方向上平鋪就行了，需要調(diào)節(jié)垂直尺寸。
div{
background-size: 40px 30px;
}這是30px的效果：
這是40px的效果：
CSSBattle[2]中有一個就是類似這樣的圖案，可以參考一下：
四、角標(biāo)效果
這是一個四周都有個三角形的角標(biāo)效果：
如果是線性漸變，我們可能需要 4 個漸變才能完成，但如果是錐形漸變，我們只需要兩個就行了，下面是實現(xiàn)過程：
先畫一個三角。
div{
background: conic-gradient( from -45deg, royalblue 90deg, transparent 0deg);
}和上面一樣。
默認(rèn)情況下，錐形漸變中心是畫布正中心，也就是50% 50%的地方，我們可以手動指定中心點位置，需要用到at關(guān)鍵詞。
div{
background: conic-gradient( from -45deg at 10px 10px, royalblue 90deg, transparent 0deg);
}這就將整個圖形的移到了左上角。
然后改變整個背景圖形的位置，向左偏移10px。
div{
background: conic-gradient( from -45deg at 10px 10px, royalblue 90deg, transparent 0deg);
background-position: -10px 0;
}利用背景的重復(fù)平鋪，一個三角形就被拆分成了兩個小三角形。
有點看不明白？下面是一個動畫演示（虛線表示視區(qū)范圍）
然后用同樣的方式，畫出下面的兩個角標(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)的效果，并且這個跟容器尺寸無關(guān)，完全是自適應(yīng)的。
五、矩形、正方形
還可以通過錐形漸變繪制矩形。
div{
background: conic-gradient( royalblue 90deg, transparent 0deg);
}這樣就能得到一個矩形。
還可以通過改變中心點和起始角度，繪制不同位置、不同大小的矩形。
比如起始角度是-90deg。
div{
background: conic-gradient( from -90deg, royalblue 90deg, transparent 0deg);
}起始角度是180deg。
div{
background: conic-gradient( from -90deg, royalblue 90deg, transparent 0deg);
}這個應(yīng)該比較容易，相比線性漸變而言，錐形漸變可以做的更多，下面看一些應(yīng)用。
六、正方形角標(biāo)
和前面三角形角標(biāo)比較類似，只是角標(biāo)是正方形的。
這個用錐形漸變就非常簡單了。
首先是繪制一個正方形。
div{
background: conic-gradient( from -90deg, royalblue 90deg, transparent 0deg);
}然后將中心點移到左上方。
div{
background: conic-gradient( from -90deg at 20px 20px, royalblue 90deg, transparent 0deg);
}這樣可以得到一個尺寸固定的正方形（20px * 20px），因為中心點在這里。
最后一步，改變一下背景尺寸就行了，默認(rèn)是 100% * 100%，原理如下：
用代碼實現(xiàn)就是：
div{
background: conic-gradient( from -90deg at 20px 20px, royalblue 90deg, transparent 0deg);
background-size: calc(100% - 20px) calc(100% - 20px);
}這樣借助背景平鋪，自然就實現(xiàn)了下面的效果：
七、棋盤
錐形漸變還能輕易的實現(xiàn)棋盤效果：
之前在這篇文章文章有詳細(xì)介紹：CSS 實現(xiàn)透明方格的 3 種方式[3]。
原理非常簡單，創(chuàng)建兩段透明間隔的漸變就行了。
div{
background: conic-gradient( royalblue 90deg, transparent 0deg 180deg, royalblue 180deg 270deg, transparent 0deg);
background-size: 20px 20px;
}原理示意如下：
八、虛線網(wǎng)格
有時候需要這樣的虛線背景，也可以用錐形漸變實現(xiàn)。
之前在這篇文章中有詳細(xì)介紹，有興趣可以參考：CSS & SVG 繪制寫作網(wǎng)格線的3種方式[4]。?
原理和前面幾乎一致，需要改變中心點位置，然后設(shè)置背景尺寸，示意如下：
具體細(xì)節(jié)這里就不重復(fù)了，完整實現(xiàn)如下：
div{
background: conic-gradient( from -90deg at 10px 4px, royalblue 90deg, transparent 0deg);
background-size: 30px 30px;
}九、十字線背景
將兩個方向上的虛線疊加就能得到十字線背景。
完整實現(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)
最后看這樣一個例子：
仔細(xì)觀察，其實和前面的三角形形角標(biāo)比較類似，只是三角形變成了折角，根據(jù)前面的思路，反向思考，這四個角其實可以合并成一個十字形，如下：
而十字形可以根據(jù)前面的方式得到，完整實現(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個比較實用的案例，以后就別以為錐形漸變僅僅只能畫圓錐了，上面 10 個 demo 我都整合在一個鏈接上了：
- CSS conic-gradient (juejin.cn)[5]
- CSS conic-gradient (codepen.io)[6]
- CSS conic-gradient (runjs.work)[7]
為啥要通過 CSS 繪制？CSS 繪制意味著尺寸都是動態(tài)可控的，可以完美適配容器的各種尺寸，而且顏色也可以隨時更換。如果你需要的圖形是固定的，不需要考慮自適應(yīng)，也不需要改變顏色，大可以采用切圖的方式，當(dāng)然也可以通過 CSS 繪制來學(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 實現(xiàn)透明方格的 3 種方式: ??https://juejin.cn/post/7072175448301994020。
[4]CSS & SVG 繪制寫作網(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。
網(wǎng)頁名稱：錐形漸變只能畫圓錐嗎？Conic-gradient十大應(yīng)用舉例
轉(zhuǎn)載來源：http://www.5511xx.com/article/cdjgcjj.html
