Beispiel:Clip-path-2.html
<!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:Grundlayout.css"> <title>clip-path - 2</title> <style> .warning {
background: #F9A800; clip-path: polygon(5% 5%, 95% 5%, 50% 95%);
}
.raute {
background: skyblue; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
}
.pentagon { background: lime; clip-path: polygon( 50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38% );
flex-direction: column; text-align: center;
}
.hex {
background: #F9A800; clip-path: polygon( 50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25% ); flex-direction: column; text-align: center;
} .hex h2 { margin-block: 0.5em 0; }
.oct {
background: #c82f04;
color: white; clip-path: polygon(
25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%
); }
.engl {
background: steelblue;
padding: 0.5em 1.5em; color: white; clip-path: polygon(
10% 0%, 100% 0%, 95% 95%, 0 100%
); }
- gallery {
display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--size), 1fr)); gap: 1em; }
- gallery > * {
border: thin dotted;
margin: 0; display: flex; justify-content: center;
}
- gallery div {
width: var(--size); height: var(--size); display: flex; align-items: center; justify-content: center;
} body { font-family:arial; --size: 12em;} </style> </head> <body>
Polygone mit clip-path
<figure>
!
</figure> <figure>
?
</figure> <figure>
Fünfeck
Seesterne, Früchte
und die Blätter des Amberbaums.
</figure> <figure>
Waben
Bienen haben die perfekte Struktur erschaffen:
platzsparend,
stabil und
schön.</div>
</figure> <figure>
</figure> <figure>
</figure> </div> </body>
</html>
