Heim >Web-Frontend >CSS-Tutorial >Wie erstelle ich ein rechtwinkliges Trapez in CSS?
Wie erstelle ich ein rechtwinkliges Trapez in CSS?
- WBOYOriginal
- 2021-12-03 17:09:188272Durchsuche
In CSS können Sie das Attribut „border“ verwenden, um ein rechtwinkliges Trapez zu erstellen. Die Syntax lautet „element {border: 0px solid transparent; border-top: trapezoid height solid color; border-left: trapezoid length solid transparent}“. .
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So erstellen Sie ein rechtwinkliges Trapez in CSS
In CSS können Sie zunächst die Randgröße des leeren Elements auf 0 und die Farbe auf transparent setzen und dann die Randgröße einer Seite auf festlegen Höhe des Trapezes und legen Sie den Rand fest. Die Farbe ist die Farbe des Trapezes.
Das Randattribut muss wie folgt verwendet werden:
<!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>
</head>
<body>
<div class='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
}
</style>
</body>
</html>Ausgabeergebnis:
Dann legen Sie den Dickenwert eines Randes neben dem Rand fest, der die Farbe festgelegt hat Stellen Sie die Farbe oder die transparente Farbe ein, beispielsweise wie folgt:
<!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>
</head>
<body>
<div class='ti'><div>
<style>
.ti {
height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
}
</style>
</body>
</html>Ausgabeergebnisse:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonWie erstelle ich ein rechtwinkliges Trapez in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!