Heim > Artikel > Web-Frontend > So erzielen Sie in CSS3 einen Rauteneffekt, der kein rechter Winkel ist
So erzielen Sie in CSS3 einen Rauteneffekt, der kein rechter Winkel ist
- WBOYOriginal
- 2021-12-08 14:37:341684Durchsuche
In CSS können Sie das Attribut „clip-path“ verwenden, um einen Rauteneffekt zu erzielen, der kein rechter Winkel ist. Dieses Attribut kann den Anzeigebereich des Elements zuschneiden das Element in eine Raute umwandeln. Die Syntax lautet „clip-path:polygon“ (50 % 0,100 % 50 %, 50 % 100 %, 0 50 %);“.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erzielen Sie in CSS3 einen Rauteneffekt, der kein rechter Winkel ist
In CSS können Sie das Clip-Path-Attribut verwenden, um den anzeigbaren Bereich des Elements durch Zuschneiden zu erstellen. Teile innerhalb des Bereichs werden angezeigt und Teile außerhalb des Bereichs ausgeblendet.
Verwenden Sie dieses Attribut, um das Element in eine Rautenform zuzuschneiden. Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.imgClip{
clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%);
}
</style>
</head>
<body>
<img class="imgClip" src="1118.02.png" alt="">
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo erzielen Sie in CSS3 einen Rauteneffekt, der kein rechter Winkel ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!