Beispiel:CSS3 clip-path-3.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!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>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>
<h1>path()-Funktion zum Beschneiden</h1>
<p>
<figure>
	<img class="star" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Small_Red_Rose.JPG/800px-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/800px-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/800px-Small_Red_Rose.JPG" alt="Roses" width="400">
</figure>
</p>

<p>Dieses Beispiel funktioniert noch nicht im Edge und Safari (Stand Februar 2021).</p>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS3_clip-path-3.html&oldid=77766“