Heim  >  Artikel  >  Web-Frontend  >  So implementieren Sie Polygone in CSS

So implementieren Sie Polygone in CSS

藏色散人
藏色散人Original
2021-07-22 11:16:592769Durchsuche

So implementieren Sie Polygone in CSS: Erstellen Sie zunächst eine HTML-Beispieldatei. Implementieren Sie dann das Parallelogramm über das Skew-Attribut von transform Polygon.

So implementieren Sie Polygone in CSS

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer

Wie implementiert man Polygone in CSS?

CSS | Interessante Polygone realisieren

Auf dem Weg in die Webwelt müssen wir einfach das Bild hochladen und anfangen Ein Profi Das Front-End des „Verfolgens“ ist natürlich „Selbstmissbrauch“ ... Heute werden wir darüber sprechen, wie man Polygone in der Front-End-Programmierung implementiert. Machen wir zuerst ein Foto, damit wir darüber nachdenken können, wie das geht Setzen Sie es zunächst um.

So implementieren Sie Polygone in CSS

So implementieren Sie Polygone in CSS

Rendering

„Wie man es umsetzt“, „Ist da Text in Kursivschrift nach oben“, „Wort Gott, gib mir einfach direkt das Bild, es fühlt sich so mühsam an“. Entspannen Sie sich, atmen Sie tief ein und folgen Sie mir, um zu sehen, wie man CSS aufpoliert.

Dieses etikettenartige Polygon kann als Kombination aus einem Parallelogramm und einem rechtwinkligen Dreieck betrachtet werden:

So implementieren Sie Polygone in CSS

Einfache Breite und Höhe

Wie wird dann aus dem Rechteck ein Parallelogramm? Nehmen Sie als Beispiel ein Rechteck aus Draht. Wie verwandelt man daraus ein Parallelogramm? Jemand antwortete: Es ist ganz einfach, drehen Sie es einfach ein wenig. Es handelt sich übrigens um die Verzerrung, das Skew-Attribut der Transformation.

So implementieren Sie Polygone in CSS

transform: skew(-10deg);

Hey, jemand hat zu diesem Zeitpunkt gefragt, ob es nicht nach oben geneigt ist? Wie man bricht, keine Sorge, schauen Sie:

So implementieren Sie Polygone in CSS

transformieren: schräg stellen (-10 Grad) drehen (-8 Grad)

Okay, es ist fast fertig, aber es gibt immer noch ein Dreieck, hier das Bild oben:

So implementieren Sie Polygone in CSS

Verwenden Sie width:0;height: 0

Der Code lautet wie folgt:

So implementieren Sie Polygone in CSS

Triangle-Code

Warum das Vor-Pseudoelement verwenden? Wissen Sie, um das Layout zu vereinfachen, sind sowohl Breite als auch Höhe sehr geschickt auf 0 eingestellt, und die Farbe und Position des Rahmens werden zum Festlegen verwendet, einschließlich der meisten Polygone, die Sie normalerweise sehen, was fast dem gleichen Prinzip entspricht. Der endgültige Code lautet wie folgt:

So implementieren Sie Polygone in CSS

Als CSS-Explorer versuchen Sie, verschiedene Ränder festzulegen und diese mit Transformation zu kombinieren, um zu sehen, welche genialen Effekte es gibt. Fünfzackige Sterne, Achtecke ... Wenn Sie es zur Hand haben, lassen Sie uns loslegen Greife die polygonale Welt an.

Empfohlenes Lernen: „CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Polygone in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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:Was bedeutet Javascript-Array?Nächster Artikel:Was bedeutet Javascript-Array?