头图

CSS 锥形渐变只能画圆锥吗?conic-gradient 10大应用举例

欢迎关注我的公众号:前端侦探

提到锥形渐变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水平。最后,如果觉得还不错,对你有帮助的话,欢迎点赞、收藏、转发❤❤❤

欢迎关注我的公众号:前端侦探

前端侦探
致力于有趣的前端探索~
14.7k 声望
13.7k 粉丝
0 条评论
推荐阅读
使用 CSS 渐变来实现波浪动画
之前看到coco的这样一篇文章: 纯 CSS 实现波浪效果!,非常巧妙,通过改变border-radius和不断旋转实现的波浪效果,有兴趣的可以去研究一下。这次尝试一下使用 CSS 渐变来实现这样一个效果,还可以用在文字背景...

XboxYan4阅读 1评论 2

封面图
ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco21阅读 2.1k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan22阅读 1.6k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

14.7k 声望
13.7k 粉丝
宣传栏