Wie erstelle ich ein rechtwinkliges Trapez in CSS?-CSS-Tutorial-php.cn

Wie erstelle ich ein rechtwinkliges Trapez in CSS?

WBOY

Freigeben： 2021-12-03 17:09:18

Original

8134 Leute haben es durchsucht

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}“. .

Wie erstelle ich ein rechtwinkliges Trapez in CSS?

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=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
        }
</style>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnis:

Wie erstelle ich ein rechtwinkliges Trapez in CSS?

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=&#39;ti&#39;><div>
<style>
.ti {
    height:100px;
width:100px;
border:0px solid transparent;
border-top:60px solid #000;
border-left:50px solid transparent;
        }
</style>
</body>
</html>

Nach dem Login kopieren

Ausgabeergebnisse:

Wie erstelle ich ein rechtwinkliges Trapez in CSS?

(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!