Heim > Artikel > Web-Frontend > So realisieren Sie ein Trapez in CSS3

So realisieren Sie ein Trapez in CSS3

WBOYOriginal: 2021-12-02 17:40:392654Durchsuche

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:

So realisieren Sie ein Trapez in CSS3

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

html5 css css3 border

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So zentrieren Sie Fotos vertikal mit CSSNächster Artikel：So zentrieren Sie Fotos vertikal mit CSS

In Verbindung stehende Artikel

Mehr sehen