CSS/Funktionen/repeating-conic-gradient()

Die repeating-conic-gradient()-Funktion legt einen sich wiederholenden, konischen (kegelförmigen) Farbverlauf fest.

Parameter	mindestens zwei color-stops mit einer Farb- und einer optionalen Längenangabe, der festlegt, welche Farbe an welcher Stelle des Verlaufs dargestellt werden soll. Fehlen die Längenangaben, so wird die zur Verfügung stehende Breite in soviele Teile geteilt, wie Farbübergänge vorhanden sind. ein optionales Winkelmaß, das den Beginn festlegt und mit from eingeleitet wird. (Standardwert 0: Verlauf beginnt oben) eine background-position entsprechende Positionsangabe, die das Zentrum des Verlaufs festlegt (Standardwert center center)
anwendbar auf	background-image, border-image, list-style-image, mask-image
Browsersupport	caniuse: css-conic-gradients

Beispiel

.macedonia {
  background: 
    radial-gradient(
      #dfac20 10%, 
      #c32e04 0 12%, 
      transparent 12%
    ),
    repeating-conic-gradient(
      #dfac20 0 15deg,
      #c32e04 0 40deg
    );
  border-radius: 0;
}

Es wird zuerst ein wiederholender Verlauf gezeichnet, der sich im Uhrzeigersinn alle 40° von gelb zu rot ändert. Darüber liegt ein radialer Verlauf mit einem gelben Kreis (10%) und einer roten Kontur (0 -12%). Alles außerhalb von 12% ist transparent, damit man die gelben (Sonnen)strahlen sieht.

Weblinks

• W3C: repeating-conic-gradients

Siehe auch

• CSS/Tutorials/Hintergrund/Verläufe
  • repeating-conic-gradient()
• Tricks mit border-image Rahmen mit Verlauf
• Masken und Beschneidungen/Masken
  • mask-image Teiltransparente Bereiche