Beispiel:CSS3 linear-gradient-3.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<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>CSS-Flaggen mit Verlauf</title>
<style>
#Deutschland {
background-image: linear-gradient(black 33.3%, red 33.3%, red 66.6%, gold 66.6%);
}
#Frankreich {
background-image: linear-gradient(to right, #0055a4 33.3%, white 33.3%, white 66.6%, #ef4531 66.6%);
}
#Congo {
background-image: linear-gradient(135deg, green 40%, #fbde4a 40%, #fbde4a 60%, red 60%);
}
#Namibia {
background-image:
url(https://wiki.selfhtml.org/images/e/e5/Stern_Namibia_Flagge.svg),
linear-gradient(147deg, darkblue 40%, white 40%, white 42%, red 42%, red 58%, white 58%, white 60%, green 60%);
background-position: 20px 20px, center;
background-repeat: no-repeat, no-repeat;
background-size: 70px, auto;
}
body {
display: grid;
grid-template-columns: repeat(auto-fill, 15em);
gap: 1em;
}
h1 {
grid-column: 1/-1;
}
div {
width: 15em;
height: 10em;
border: thin solid;
}
</style>
</head>
<body>
<h1>Länderflaggen mit <code>linear-gradient()</code></h1>
<figure>
<div id="Deutschland"></div>
<figcaption>Deutschlandflagge</figcaption>
</figure>
<figure>
<div id="Frankreich"></div>
<figcaption>Tricolore</figcaption>
</figure>
<figure >
<div id="Congo"></div>
<figcaption>Flagge von Congo</figcaption>
</figure>
<figure>
<div id="Namibia"></div>
<figcaption>Flagge von Namibia</figcaption>
</figure>
</body>
</html>
