欢迎关注我的公众号：前端大神提到了conic-gradient梯度（有的也叫“角梯度”）。很多人被这个名字搞糊涂了，以为是用来画圆锥的，比如div{background-image:conic-gradient(from40deg,#fff,#000);}这样就可以画出一个圆锥形的放射状图案获得。当然，更进一步，你可以绘制饼图div{background:conic-gradient(red36deg,orange36deg170deg,yellow170deg);border-radius:50%}这个也比较容易想到。以下类型的锥体更直观。除了这些，还能画出什么图案呢？这里有一些更实际的案例。1.在锥形渐变出来之前，用线性渐变也可以实现三角形，但是只能画出直角三角形。比如div{background:linear-gradient(-45deg,royalblue50%,transparent0);}可以得到这样的三角形，只能用两个直角三角形拼接在一起。像这样，如果用锥形渐变，直接一层渐变就可以了。比如上面那个，起始角度是-45deg，改变渐变。90deg，如下代码实现所示为div{background:conic-gradient(from-45deg,royalblue90deg,transparent0deg);}像上一篇文章中的小三角形可以这样画。2.箭头符号将三角形改变角度，如div{background:conic-gradient(from30deg,royalblue120deg,transparent0deg);背景大小：40px60px；background-repeat:no-repeat;}可以得到这样的图形然后绘制一个反向空心三角形（三角形是透明的）div{background:conic-gradient(from30degat050%,transparent120deg,royalblue0deg);背景大小：40px60px；background-repeat:no-repeat;}为了区分，改变Color接下来，改变两者的位置，组合div{background-position:20px50%,-20px50%;}效果如下最后，tile水平方向，改成相同的颜色，得到这样的箭头符号3、河流符号这个比较简单。在上面的基础上，在垂直方向平铺即可。你需要调整垂直大小div{background-size:40px30px;}这是30px的效果这是CSSBattle中40px的效果一个是这样的一个pattern，可以参考4.Cornermarkeffect这是一个周围有三角形的角标效果。如果是线性渐变，我们可能需要4个渐变来完成，但是如果是锥形渐变，我们只需要2个就可以了，下面是实现过程：先画一个三角形div{background:conic-gradient(from-45deg,royalblue90deg,transparent0deg);}同上默认情况下，圆锥渐变的中心是画布的中心,也就是50%在50%的地方，我们可以手动指定中心点的位置，我们需要用到at关键字div{background:conic-gradient(from-45degat10px10px,royalblue90deg,transparent0deg);}这会将整个图形移动到然后改变左上角整个背景图形的位置，向左移动10pxdiv{background:conic-gradient(from-45degat10px10px,royalblue90deg,transparent0deg);background-position:-10px0;}使用背景店的重复层次，一个三角形拆分成两个小三角形，有点难懂？下面是一个动画演示（虚线表示视口的范围）然后用同样的方法画出下面的两个角标。完整代码如下div{background:conic-gradient(from-45degat10px10px,royalblue90deg,transparent0deg),conic-gradient(from135degatleft10pxbottom10px,royalblue90deg,transparent0deg);background-position:-10px0;}这样就得到了三角形角标的效果，而且这个和容器大小无关，完全自适应五、矩形，正方形也可以通过锥形渐变绘制矩形div{background:conic-gradient(royalblue90deg,transparent0deg);}这样就可以得到一个矩形。您还可以通过更改中心点和起始角度来绘制不同位置和大小的矩形。例如起始角度为-90degdiv{background:conic-gradient(from-90deg,royalblue90deg,transparent0deg);}起始角度为180degdiv{background:conic-gradient(from-90deg,royalblue90deg,transparent0deg);}与线性渐变相比，这应该更容易在锥形渐变方面，您可以做更多。让我们看看下面的一些应用程序。6、方形角标与前面的三角形角标类似，只是角标是正方形。使用锥形渐变非常简单。首先画一个正方形div{background:conic-gradient(from-90deg,royalblue90deg,transparent0deg);}然后把中心点移到左上角div{background:conic-gradient(from-90degat20px20px,royalblue90deg,transparent0deg);}这样就可以得到一个固定大小（20px*20px）的正方形，因为中心点在这里。最后一步是更改背景大小。默认值为100%*100%。(从-90degat20px20px,royalblue90deg,transparent0deg);background-size:calc(100%-20px)calc(100%-20px);}这样，在背景平铺的帮助下，自然就实现了下面的效果VII.棋盘锥形渐变也可以轻松实现棋盘效果。这篇文章之前详细介绍过：CSS实现透明方块的3种方式。原理很简单。只需创建一个具有两个透明间隔的渐变。div{背景：圆锥渐变（皇家蓝90deg，transparent0deg180deg,royalblue180deg270deg,transparent0deg);background-size:20px20px;}原理如下八、虚线网格有时需要这样的虚线背景，也可以用锥形渐变来实现。详细的介绍，有兴趣的可以参考：CSS&SVG绘制网格线的三种方式的原理和前面的差不多。您需要更改中心点的位置，然后设置背景大小。具体内容如下，在此不再赘述。完整的实现如下div{background:conic-gradient(from-90degat10px4px,royalblue90deg,transparent0deg);background-size:30px30px;}九、十字准线的背景将两个方向的虚线叠加得到十字准线的完整背景实现如下：div{background:conic-gradient(from-90degat10px4px,royalblue90deg,transparent0deg),conic-gradient(from-90degat4px10px,royalblue90deg,transparent0deg);背景大小：30px；background-position:03px,3px0;}10、最后看这样一个例子，仔细观察。其实和之前的三角形角标差不多，只是三角形变成了折角。按照前面的思路，回头想想，这四个角其实可以合并成一个十字形，如下和十字形可以按照前面的方法得到，完整的实现如下div{background:conic-渐变（从-90deg到20px8px，royalblue90deg，透明0deg），锥形渐变（从-90deg到8px20px，royalblue90deg，透明0deg）；background-position:-10px-4px,-4px-10px;}十一、demo和总结以上介绍了10个比较实用的圆锥梯度的案例。以后不要以为圆锥渐变只能画圆锥。我把以上10个demo整合成一个链接：CSSconic-gradient(codepen.io)为什么CSSconic-gradient(runjs.work)是用CSS绘制的？CSS绘图意味着尺寸是动态可控的，可以完美适配各种尺寸的容器，颜色也可以随时改变。如果你需要的图形是固定的，就不需要考虑自适应，也不需要改变颜色。你可以使用切图的方式，当然你也可以通过CSS绘图来学习和提高你的CSS水平。最后，如果觉得对你有好处和帮助，欢迎点赞、收藏、转发???欢迎关注我的公众号：前端大侦探
