锥形渐变只能画圆锥吗？Conic-gradient 十大应用举例

XboxYan 2023-03-28 原文

提到锥形渐变conic-gradient[1]（也有的称“角向渐变”），很多人都被这个名称给迷惑了，以为就是用来画圆锥的，比如：

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

这样可以得到锥形的放射性图案。

当然，再进一步，可以绘制饼图。

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

这个也比较容易想到，如下：

这类锥形都比较直观，除了这些，还能绘制哪些图案呢？下面就来介绍一些比较实用的案例。

一、三角形

在锥形渐变出来之前，用线性渐变也能实现三角形，但只能绘制直角三角形，例如：

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

可以得到这样的图形。

如果想要一个这样的三角形。

那只能用两个直角三角形拼接了，就像这样。

如果是用锥形渐变，就可以直接一层渐变搞定，比如上面这个，起始角度是 -45deg，渐变了90deg，示意如下：

用代码实现就是：

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

为了区分，换个颜色。

接下来，改变一下两者的位置，组合起来。

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

效果如下：

最后水平方向平铺，并且改成相同的颜色，就能得到这样的箭头符号。

三、河流符号

这个比较简单，在上面的基础上，垂直方向上平铺就行了，需要调节垂直尺寸。

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

这是30px的效果：

这是40px的效果：

CSSBattle[2]中有一个就是类似这样的图案，可以参考一下：

四、角标效果

这是一个四周都有个三角形的角标效果：

如果是线性渐变，我们可能需要 4 个渐变才能完成，但如果是锥形渐变，我们只需要两个就行了，下面是实现过程：

先画一个三角。

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

和上面一样。

默认情况下，锥形渐变中心是画布正中心，也就是50% 50%的地方，我们可以手动指定中心点位置，需要用到at关键词。

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

利用背景的重复平铺，一个三角形就被拆分成了两个小三角形。

有点看不明白？下面是一个动画演示（虚线表示视区范围）

然后用同样的方式，画出下面的两个角标，完整代码如下：

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

这样就得到了三角形角标的效果，并且这个跟容器尺寸无关，完全是自适应的。

五、矩形、正方形

还可以通过锥形渐变绘制矩形。

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

这个应该比较容易，相比线性渐变而言，锥形渐变可以做的更多，下面看一些应用。

六、正方形角标

和前面三角形角标比较类似，只是角标是正方形的。

这个用锥形渐变就非常简单了。

首先是绘制一个正方形。

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），因为中心点在这里。

最后一步，改变一下背景尺寸就行了，默认是 100% * 100%，原理如下：

用代码实现就是：

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

这样借助背景平铺，自然就实现了下面的效果：

七、棋盘

锥形渐变还能轻易的实现棋盘效果：

之前在这篇文章文章有详细介绍：CSS 实现透明方格的 3 种方式[3]。

原理非常简单，创建两段透明间隔的渐变就行了。

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

原理示意如下：

八、虚线网格

有时候需要这样的虚线背景，也可以用锥形渐变实现。

之前在这篇文章中有详细介绍，有兴趣可以参考：CSS & SVG 绘制写作网格线的3种方式[4]。

原理和前面几乎一致，需要改变中心点位置，然后设置背景尺寸，示意如下：

具体细节这里就不重复了，完整实现如下：

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

九、十字线背景

将两个方向上的虚线叠加就能得到十字线背景。

完整实现如下：

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

十、折线角标

最后看这样一个例子：

仔细观察，其实和前面的三角形形角标比较类似，只是三角形变成了折角，根据前面的思路，反向思考，这四个角其实可以合并成一个十字形，如下：

而十字形可以根据前面的方式得到，完整实现如下：

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 conic-gradient (juejin.cn)^[5]
CSS conic-gradient (codepen.io)^[6]
CSS conic-gradient (runjs.work)^[7]

为啥要通过 CSS 绘制？CSS 绘制意味着尺寸都是动态可控的，可以完美适配容器的各种尺寸，而且颜色也可以随时更换。如果你需要的图形是固定的，不需要考虑自适应，也不需要改变颜色，大可以采用切图的方式，当然也可以通过 CSS 绘制来学习、提升自己的CSS水平。

参考资料

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

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

[3]CSS 实现透明方格的 3 种方式: https://juejin.cn/post/7072175448301994020。

[4]CSS & SVG 绘制写作网格线的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。

锥形 Conic-gradient span style color 开发前端 $CSS

有关锥形渐变只能画圆锥吗？Conic-gradient 十大应用举例的更多相关文章

ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好最佳答案我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2
我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中，我们希望成为我们的rails应用程序中的一等公民的几个类类型起源，这意味着它们应该驻留在应用程序的app文件夹下，它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来，我有点担心应用程序文件夹被这么多目录污染。因此，我想将它们移动到一个子目录/模块中，该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内，目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty