用 CSS repeating-linear-gradient 實現警示條

熟悉 console 的人都知道你可以在 console.log 裡面用 %c 來放 CSS。比如說：

        console.log("%cHello, world!", "color: red; font-size: 20px;");
      

你就會獲得一個紅紅大大的 Hello, world!。很多網站都會放一些警示和提醒。

有一天我突然想到覺得把我這個部落格弄成這樣挺有趣的：

但我們不能使用 background-image 來放圖片，所以我們得用 CSS 來做出這個簡單的效果。

其實絕大部份能用 CSS 漸層解決的事我都不會想用 SVG，甚至是 PNG。不過需要注意有時候線條放大看會模糊，尤其是在 Fireox 上。

linear-gradient

首先很多人應該跟我一樣直覺想到的是 linear-gradient，然後使用 background-repeat: repeat-x 來實現這個效果。

        background-image: linear-gradient(
    45deg,
    #ebc405,
    #ebc405 20px,
    #000 20px,
    #000 40px,
    #000 40px
);
background-size: 40px 100%;
      

黃色一半，黑色一半對吧？

然後你就會得到：

慘不人賭。怎麼調整就是一堆三角形。

我用 Figma 簡單畫一個示意圖。如果我們希望 background-repeat 可以連接好，前後一定要相連。你至少會需要三層顏色，甚至是四層、五層。你還需要算點三角函數確保這個角度跟長度是完全可以拚上的。

~~對於你們這群讀高職的人來說~~實在非常麻煩，而且很難調整。但也不是不行，如果我們採取最簡單的情況，就是旋轉 45 度，大概會長這樣。

        div {
    height: 100px;
    background-image: linear-gradient(
        45deg,
        #ebc405 33%,
        #000 33% 66%,
        #ebc405 66% 100%
    );
    background-size: 202px 100%;
}
      

算了一整個小時的三角函數之後我突然想到...

使用 repeating-linear-gradient

這個屬性可以讓你更方便地做出這個效果。

        div {
    height: 100px;
    background-image: repeating-linear-gradient(
        45deg,
        #ebc405 0px 20px,
        #000 20px 40px
    );
}
      

就這樣這麼簡單。你可以注意我們的漸層屬性單位是使用絕對單位 px 而不是百分比。這樣結束之後它為自己幫你重複。

你也可以把寬度設定成變數來更簡單的調整。

        div {
    height: 100px;
    --width: 20px;
    background-image: repeating-linear-gradient(
        45deg,
        #ebc405 0px var(--width),
        #000 var(--width) calc(var(--width) * 2)
    );
}
      

上: repeating-linear-gradient 下: linear-gradient

Codepen 範例

動畫

接下來你甚至可以玩一些動畫:

我們讓它動起來：

        div {
    animation: move 1s linear infinite;
    width: calc(100% + var(--width) * 4);
}

@keyframes move {
    from {
        background-position: 0px;
    }
    to {
        background-position: calc(var(--width) * sqrt(2) * -2);
    }
}
      

注意這裡我們把背景再拉大一點，不然後面會是空白的。然後我們使用 background-position 來移動背景。

移動背景的距離是 var(--width) * sqrt(2) * -2，這是因為我們的漸層是 45 度，所以斜斜的看是 var(--width)，那麼平著看就是 var(--width) 乘以根號二。要乘以 2 是因為如果只有 1 的畫只會移動到黃黑交換。而要乘以 -1 是因為我們希望它能夠往左移動。

我們甚至可以讓它旋轉起來：

        div {
    margin-top: 40vh;
    height: 100px;
    font-size: 40px;
    --width: 20px;
    --deg: 45;
    background-image: repeating-linear-gradient(
        calc(var(--deg) * 1deg),
        #ebc405,
        #ebc405 var(--width),
        #000 var(--width),
        #000 calc(var(--width) * 2),
        #000 calc(var(--width) * 2)
    );
    animation:
        move linear 1s infinite,
        spin linear 8s infinite;
    animation-composition: accumulate;
    width: calc(100% + var(--width) * 4);
}

@property --deg {
    syntax: "<number>";
    initial-value: 45;
    inherits: false;
}

@keyframes move {
    from {
        background-position: 0px;
    }
    to {
        background-position: calc(var(--width) * sqrt(2) * -2);
    }
}

@keyframes spin {
    from {
        --deg: 0;
    }
    to {
        --deg: 360;
    }
}
      