Fonction CSS conic-gradient()

Fonctions CSS

Exemple

Dégradé conique à trois couleurs :

#grad { background-image: conic-gradient(red, yellow, green); }

Essayez-le vous-même »

Définition et utilisation

La fonction conic-gradient() crée une image composée de dégradés.

Les dégradés coniques font tourner les couleurs autour d'un point central (plutôt que de les faire rayonner vers l'extérieur depuis le centre).

Pour créer un dégradé conique, vous devez définir au moins deux arrêts de couleur.

Exemple de dégradé conique :

D'après la figure, nous pouvons voir la direction du dégradé et le point de départ du dégradé conique. Le point de départ est le centre de la forme, et l'effet de dégradé est appliqué dans le sens des aiguilles d'une montre autour du centre.
version : CSS3

Prise en charge des navigateurs

Les nombres dans le tableau indiquent le premier numéro de version de navigateur qui prend en charge la fonction.

Fonction
conic-gradient() 69.0 79.0 83.0 12.1 56.0

Syntaxe CSS

background-image: conic-gradient([from angle] [at position,] color degree, color degree, ...);
Valeur Description
from angle Facultatif. L'angle de départ. La valeur par défaut est 0deg.
at position Facultatif. Position du centre. Par défaut, centré.
couleur degré, ..., couleur degré Arrêt de dégradé angulaire. La valeur se compose d'une valeur de couleur suivie d'une position d'arrêt facultative (un degré entre 0 et 360 ou un pourcentage entre 0% et 100%).

Plus d’exemples

Exemple

Dégradé conique à cinq couleurs :

#grad { background: conic-gradient(red, orange, yellow, green, blue); }

Essayez-le vous-même »

Exemple

Un dégradé conique à trois couleurs, avec les degrés définis pour chaque dégradé :

#grad { background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg) }

Essayez-le vous-même »

Exemple

En définissantborder-radius: 50%Transformez le dégradé conique en cercle :

#grad { background-image: conic-gradient(red, yellow, green, blue, black); border-radius: 50%; }

Essayez-le vous-même »

Exemple

Définir l'angle de départ :

#grad { background-image: conic-gradient(from 90deg, red, yellow, green); border-radius: 50%; }

Essayez-le vous-même »

Exemple

Spécifier la position du centre :

#grad { background-image: conic-gradient(at 60% 45%, red, yellow, green); border-radius: 50%; }

Essayez-le vous-même »

Exemple

Spécifiez une position et définissez un angle :

#grad { background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green); border-radius: 50%; }

Essayez-le vous-même »

Exemple

Un diagramme circulaire :

#grad { background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg); border-radius: 50%; }

Essayez-le vous-même » 
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);

Analyse du code :

  • red 0deg, red 90degIndique que l'intervalle de 0 à 90 degrés utilise du rouge.
  • yellow 90deg, yellow 180degIndique que l'intervalle de 90 à 180 degrés utilise du jaune.
  • green 180degIndique que l'intervalle de 180 à 360 degrés utilise du vert.

Exemple

Créez une carte de sélection de couleur :

#grad { background: radial-gradient(closest-side, gray, transparent), conic-gradient(red, magenta, blue, aqua, lime, yellow, red); border-radius: 50%; }

Essayez-le vous-même »

Fonctions CSS

autres extensions