In CSS können Sie die Attribute „border“ und „border-top“ verwenden, um einen trapezförmigen Effekt zu erzielen. Sie müssen nur den Stil „border: thick value solid transparent; border-top: trapezoid height solid trapezoid color;“ hinzufügen das Element.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
Wie realisiert man ein Trapez in CSS3?
Wenn wir in CSS einen trapezförmigen Mustereffekt erstellen möchten, wie erreichen wir ihn? Das folgende Beispiel erklärt, wie man in CSS3 einen trapezförmigen Mustereffekt erzielt.
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 type="text/css">
div{
border:25px solid transparent;
border-top: 25px solid red;
height: 200px;
width: 100px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>Ausgabeergebnis:
(Lernvideo-Sharing: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo realisieren Sie ein Trapez in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
