先看效果图

image.png
比较麻烦的是每块的底色处理

:nth-child(n) 选择器

匹配属于其父元素的第 N 个子元素，不论元素的类型。
n 可以是数字、关键词或公式。

  • Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。
  • 使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

    代码实现

    运用less混合传参，底色通过::after伪元素实现，以下只贴颜色处理的核心代码
    1. .colorLine(@index, @startColor, @endColor) {
    2. &:nth-child(@{index})::after {
    3.   background: linear-gradient(136deg, @startColor, @endColor);
    4. }
    5. }
    6. .colorLine(1n, rgba(255, 122, 109, 1), rgba(255, 77, 62, 1));
    7. .colorLine(2n, rgba(93, 219, 224, 1), rgba(0, 188, 218, 1));
    8. .colorLine(3n, rgba(59, 220, 72, 1), rgba(92, 209, 46, 1));
    9. .colorLine(4n, rgba(254, 190, 43, 1), rgba(255, 163, 0, 1));
    10. .colorLine(5n, rgba(148, 117, 247, 1), rgba(119, 83, 233, 1));