CSS图形绘制高阶小技巧 – 角向渐变的妙用！

terry 2年前 (2023-09-27) 阅读数 62 #数据结构与算法

绘制CSS图形的进阶技巧——角度渐变的奇妙运用！？：

那么，这件商品有什么特别之处呢？让我们来看看吧。

快速实现网格布局

首先，上面的布局还是希望通过标签来完成。这不是问题。

凭借渐变可以多层的特点，我们可以快速完成页面的网格形状。假设我们的结构如下：

<div></div>

div {
    margin: auto;
    width: 500px;
    height: 500px;
    background: 
        repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        #0e284d;
}

有了两层重复的线性渐变，我们很快就可以得到这样一个图案：

有了这样的网格之后，剩下要解决的就是如何画小十字了。来自一：

在棋盘布局中，我们尝试实现一些Box-shadow类似的模式。

在这篇文章中我们将尝试使用角度渐变来快速实现这个图形！

角度渐变技巧

在此之前，我们先来学习一下角度渐变技巧。

角渐变，即圆锥形渐变。如果你比较新，可以先看我的文章——魔锥渐变角渐变。

例如：

{
    background: conic-gradient(deeppink, yellowgreen);
}

从渐变圆的中心，渐变的起始角度和渐变方向上，是这样的：

高亮：

从图片中可以看到，开始角度渐变的点起始点、起始角度和渐变方向为：

起始点为图形中心，默认渐变角度 0deg 为从上方垂直于圆心
渐变方向是绕中心

顺时针实现的，当然我们也可以查看角度渐变的起始角和的的中点。

将上面的代码稍微修改一下：

{
    background: conic-gradient(from 270deg at 50px 50px, deeppink, yellowgreen);
}

效果如下：

我们将起始角度改为的中心点。

明白了这一点后。根据上图，我们重新画一个图：

div {
    margin: auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 
 360deg);
    border: 1px solid #000;
}

效果如下：

起始角度和角度渐变的中心保持不变但只有第9个是粉红色的，然后将270deg图形设置为透明色。

我们使用角度渐变在图像中创建一个小矩形！

接下来我们在上面的图形中添加一个背景位置：-25px，-25px：

div {
    margin: auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 
 360deg);
    background-position: -25px -25px;
    border: 1px solid #000;
}

这样我们就得到这样一个图形：有这样的现象吗？如果我们在代码中添加 background-repeat: no-repeat:

div {
    margin: auto;
    width: 200px;
    height: 200px;
    background: conic-gradient(from 270deg at 50px 50px, deeppink 0%, deeppink 90deg, transparent 90deg, transparent 
 360deg);
    background-position: -25px -25px;
    background-repeat: no-repeat;
    border: 1px solid #000;
}

，则只剩下左上角：

，所以这里默认会重复渐变图形。特色其实就是这个意思：

你看懂了这张图，你也就明白了整个技术的核心！

了解了以上实现加号图形的技巧

了解了以上技巧，我们回到我们需要实现的图形，再使用两层角度渐变就可以得到我们想要的图形。

第一层：

div {
    background: 
        conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg),
        repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        #0e284d;
    background-repeat: repeat, no-repeat, no-repeat;
    background-size: 
        100px 100px,
        100% 100%,
        100% 100%;
    background-position: 
        -2.5px -10px,
        0 0,
        0 0;
}

效果如下：

我们在这里做了什么？我们添加的渐变在顶层，即第一层渐变：

背景尺寸：100px 100px 将整个页面切割成多个100px x 100px 用角度渐变实现方形图案
通过以上技术，核心为背景位置：-2.5px -10px，矩形图案以x❓的大小显示。正方形的四个角

第二层角度渐变叠加，同样的方法即可：

div {
    background: 
        conic-gradient(from 270deg at 20px 5px, #31c2ec 90deg, transparent 0deg),
        conic-gradient(from 270deg at 5px 20px, #31c2ec 90deg, transparent 0deg),
        repeating-linear-gradient(90deg,#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        repeating-linear-gradient(#aec8ee 0, #aec8ee 1px, transparent 1px, transparent 100px),
        #0e284d;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
    background-size: 
        100px 100px,
        100px 100px,
        100% 100%,
        100% 100%;
    background-position: 
        -10px -2.5px,
        -2.5px -10px,
        0 0,
        0 0;
}

这样我们就完美的实现了我们需要的图形效果：