Beispiel:Clip-path-1.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</title> <style> .clip-rect { clip-path: inset(80px 110px 190px 90px round 5px); } .clip-circle { clip-path: circle(100px at 105px 100px); } .clip-oval { clip-path: ellipse(90px 140px at 125px 140px); } .clip-star { /* Stern als Polyline */ clip-path: polygon(75px 150px,-4px 150px,60px 203px,26px 288px,120px 248px,206px 298px,177px 211px,239px 150px,158px 150px,122px 36px,77px 150px); } img:hover { clip-path: none; }
- gallery {
display:grid; grid-template-columns: repeat(2, 1fr); gap: 1em
} </style> </head> <body>
Verwendung von clip-path
<figure> <img class="clip-rect" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius"> </figure> <figure> <img class="clip-circle" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius"> </figure> <figure> <img class="clip-oval" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius"> </figure> <figure> <img class="clip-star" src="/images/4/4d/Celsius.jpg" alt="Anders Celsius" title="Anders Celsius"> </figure>
</body> </html>
