Multiply colorful background 1

by yiiBoy

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        /* Базовые цвета */
        :root {
            --color1: #2196f3; /* Синий */
            --color2: #ff0000; /* Красный */
            --color3: #4caf50; /* Зеленый */
            --color4: #ffeb3b; /* Желтый */
            --color5: #9c27b0; /* Фиолетовый */
        }

        /* Базовый стиль для слов */
        .striped-background {
            display: inline-block; /* Блочное отображение внутри строки */
            padding: 5px 10px; /* Отступы вокруг текста */
            color: white; /* Цвет текста */
            font-weight: bold; /* Жирный текст */
            border-radius: 5px; /* Закругленные углы */
            margin: 5px; /* Отступы между словами */
        }

        /* Двухцветный полосатый фон */
        .striped-two-color {
            background-image: repeating-linear-gradient(
                45deg, /* Угол наклона полос */
                var(--color1), /* Первый цвет */
                var(--color1) 20px, /* Длина первой полосы */
                var(--color2) 20px, /* Начало второй полосы */
                var(--color2) 40px /* Длина второй полосы */
            ); 
        }

        /* Трехцветный полосатый фон */
        .striped-three-color {
            background-image: repeating-linear-gradient(
                45deg, /* Угол наклона полос */
                var(--color1), /* Первый цвет */
                var(--color1) 20px, /* Длина первой полосы */
                var(--color2) 20px, /* Начало второй полосы */
                var(--color2) 40px, /* Длина второй полосы */
                var(--color3) 40px, /* Начало третьей полосы */
                var(--color3) 60px /* Длина третьей полосы */
            ); 
        }
    </style>
</head>
<body>

<p>Пример текста с полосатым фоном из двух и трех цветов:</p>

<p>
    <span class="striped-background...