CSS conic-gradient() functie

Definitie en gebruik

CSS conic-gradient(); De functie stelt de conische verloop in als achtergrondafbeelding.

Een conische verloop is een kleurverloop dat zich om het middelpunt roteert (soortgelijk aan een taartdiagram en een kleurenring).

Om een conische verloop te maken, moeten ten minste twee kleurstoppunten worden gedefinieerd.

Er zijn drie kleuren in de conische verloop:

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

Er zijn vijf kleuren in de conische verloop:

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

Er zijn drie kleuren en voor elke kleur wordt een hoek gespecificeerd in de conische verloop:

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

Door het toevoegen van border-radius: 50% ziet de conische verloop eruit als een taartdiagram:

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

Conische gradient met starthoek:

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

Conische gradient met centrumpositie:

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

Conische gradient met zowel starthoek als centrumpositie:

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

Een andere cirkeldiagramvoorbeeld:

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

background-image: conic-gradient([van hoek] positie,] kleurhoek, kleurhoek, ...);

Waarde	Beschrijving
van hoek	Optioneel. De hele conische gradient wordt om deze hoek gedraaid. De standaardwaarde is 0deg.
bij positie	Optioneel. Specificeer de centrale positie van de conische gradient. De standaardwaarde is center.
kleurhoek, ... , kleurhoek	Kleurstops zijn de kleuren die u wilt weergeven met een gladde overgang. Deze waarde bestaat uit kleurwaarden en optionele stopposities (hoeken tussen 0 en 360 graden of percentages tussen 0% en 100%).

Waarde

Beschrijving

van hoek

Optioneel. De hele conische gradient wordt om deze hoek gedraaid. De standaardwaarde is 0deg.

bij positie

Optioneel. Specificeer de centrale positie van de conische gradient. De standaardwaarde is center.

kleurhoek, ... , kleurhoek

Kleurstops zijn de kleuren die u wilt weergeven met een gladde overgang.

Deze waarde bestaat uit kleurwaarden en optionele stopposities (hoeken tussen 0 en 360 graden of percentages tussen 0% en 100%).