Beispiel:CSS3 clip-path-3.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>path()-Funktion zum Beschneiden</title> <style> .star { -webkit-clip-path: path('m 40,225 l 75-225 l75,225 l-190-140 h 235'); clip-path: path('m 40,225 l 75-225 l75,225 l-190-140 h 235'); } .heart { -webkit-clip-path: path('m 125,225 l -100,-100 a 50,50 90 0,1 100,-75 a 50,50 90 0,1 100,75 z'); clip-path: path('m 125,225 l -100,-100 a 50,50 90 0,1 100,-75 a 50,50 90 0,1 100,75 z'); } .beziergon { -webkit-clip-path: path('m 5,30 c80,-80 160,80 230,-20 c-40,80 40,160 0,220 c-80,60 -140,-80 -220,10 c-50,-80 60,-140 -10-210'); clip-path: path('m 5,30 c80,-80 160,80 230,-20 c-40,80 40,160 0,220 c-80,60 -140,-80 -220,10 c-50,-80 60,-140 -10-210'); } figure { position: relative; width: 250px; height: 250px; margin: 10px; display: inline-block;; }
figure img { width: 250px; height: 250px; object-fit: cover; } img:hover { -webkit-clip-path: none; clip-path: none; } </style> </head> <body>
<figure> <img class="star" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Small_Red_Rose.JPG/960px-Small_Red_Rose.JPG" alt="Roses" width="400"> </figure> <figure> <img class="heart" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Small_Red_Rose.JPG/960px-Small_Red_Rose.JPG" alt="Roses" width="400"> </figure> <figure> <img class="beziergon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Small_Red_Rose.JPG/960px-Small_Red_Rose.JPG" alt="Roses" width="400"> </figure>
</body> </html>
