So implementieren Sie Polygone in CSS

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.

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.

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:

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.

transform: skew(-10deg);

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

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:

Verwenden Sie width:0;height: 0

Der Code lautet wie folgt:

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:

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!