Beispiel:CSS-conic-gradient-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" >
<title>conic-gradient()</title>
<style>
.conic-gradient-sw {
background: conic-gradient(black, #fff, #000);
}
.conic-gradient1 {
background: conic-gradient(red, orange, yellow, lime, aqua, blue, magenta, red);
}
.farbkreis {
background: radial-gradient(white 30%, transparent 31%), conic-gradient(#c32e04 22deg, #df6c20 0 67deg, #dfac20 0 112deg, #8db243 0 157deg, hsl(85 100% 30%) 0 202deg, #306f91 0 247deg, #9357b9 0 292deg, #660033 0 337deg,#c32e04 0);
}
.sunbeam {
background: conic-gradient(from 0.25turn at 20% 50%, #dfac20, 10deg, #306f91, 350deg, #e6f2f7);
border-radius: 0;
}
.squares {
background: conic-gradient(#c32e04 90deg, #dfac20 0 180deg, #306f91 0 270deg, #5a9900 0);
border-radius: 0;
}
.prism {
background: conic-gradient(at 0% 30%, #c32e04 10%, yellow 30%, #306f91 50%);
border-radius: 0;
}
div {
height: 10em;
width: 10em;
margin: 0 auto 1em;
border-radius: 50%;
border: thin solid;
}
figure {
width: 12em;
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, 12em);
gap: 1em;
}
h1 {grid-column: 1/-1;
}
</style>
</head>
<body>
<h1><code>conic-gradient()</code> - gewinkelte Farbverläufe</h1>
<figure>
<div class="conic-gradient-sw"></div>
<figcaption>Kreis mit konischem SW-Verlauf</figcaption>
</figure>
<figure>
<div class="conic-gradient1"></div>
<figcaption>konischer Farbverlauf mit weichen Übergängen</figcaption>
</figure>
<figure>
<div class="farbkreis"></div>
<figcaption>Farbkreis mit 8 Segmenten<br>harten Übergängen und einem Loch in der Mitte (Donut)</figcaption>
</figure>
<figure>
<div class="squares"></div>
<figcaption>Wer sagt, das das Element rund sein muss?</figcaption>
</figure>
<figure>
<div class="prism"></div>
<figcaption>Strahlen durch ein Prisma; Zentrum ist 0 30%</figcaption>
</figure>
<figure>
<div class="sunbeam"></div>
<figcaption>Riss im Himmel</figcaption>
</figure>
</body>
</html>
