Fonction repeating-linear-gradient

La fonction repeating-linear-gradient définit un dégradé linéaire répétitif. Cela signifie que nous définissons un motif de dégradé spécifique, par exemple, de 0px à 10px - un dégradé du rouge au bleu ciel et ce dégradé sera répété sur tout le bloc : 0px à 10px, de 10px à 20px, de 20px à 30px et ainsi de suite.

Cette fonction est appliquée aux propriétés qui définissent une image d'arrière-plan : background, background-image ou une image de bordure : border-image, background-image-source.

Syntaxe

sélecteur {
	background: repeating-linear-gradient([direction], couleur1 taille1, couleur2 taille2...);
}

Valeurs

Valeur	Description
direction	Définit une direction spécifique du dégradé dans toutes les unités pour les angles ou avec les mots-clés `top`, `left`, `right`, `bottom` ou leurs combinaisons. L'ordre des mots n'a pas d'importance. Le paramètre est optionnel : s'il n'est pas spécifié, le dégradé ira de haut en bas. Le mot `to` est placé avant la direction.
angle	Angle dans toutes les unités pour les angles. Peut être positif ou négatif. Le paramètre est optionnel. Simultanément, on peut spécifier soit un angle, soit une direction (ou rien du tout).
couleur1	Couleur de départ du dégradé dans toutes les unités pour la couleur.
couleur2	Couleur de fin du dégradé dans toutes les unités pour la couleur.
taille	Définit l'étendue d'une couleur spécifique du dégradé dans toutes les unités pour la taille.

Exemple . L'option la plus simple

Le dégradé ressemblera à ceci : de 0px à 20px couleur rouge pure, de 20px à 40px - dégradé du rouge au bleu ciel. Et cela se répétera de haut en bas (c'est pour cela qu'il s'agit d'un dégradé répétitif) :

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Exemple . Couleurs nettes

Le dégradé ressemblera à ceci : de 0px à 20px couleur rouge pure, de 20px à 40px - bleu ciel pur (l'astuce est que la deuxième couleur commence là où la première se termine). Et cela se répétera de haut en bas :

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Exemple . Changeons la direction

Maintenant la direction du dégradé sera de droite à gauche :

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(to left, red 0px, red 20px, blue 20px, blue 40px);
	width: 400px;
	height: 200px;
}

Exemple . Direction en degrés

Pour la direction, spécifions un angle en degrés :

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Exemple . Valeur négative

Faisons une direction avec une valeur négative :

<div id="elem"></div>

#elem {
	background: repeating-linear-gradient(-45deg, red 0px, red 2px, white 2px, white 10px);
	width: 400px;
	height: 200px;
}

Voir aussi

la fonction repeating-radial-gradient,
qui crée un dégradé radial répétitif
la fonction linear-gradient,
qui crée un dégradé linéaire
la fonction radial-gradient,
qui crée un dégradé radial