Wie implementiert man Dreiecke und Parallelogramme mit CSS?

Als ich kürzlich eine technische Website durchsuchte, fand ich den Stil der Schlüsselwörter im Artikel so cool, den Paginierungsstil. Hier ist ein Screenshot:

Sie können auch eine solche Seitenleiste unten auf der Homepage sehen; sieht das nicht gut aus? Werfen wir einen Blick darauf, wie dies erreicht wird ~

Die erste Methode: Grenze verwenden

Die erste Methode besteht darin, mit dem Randattribut-Hack ein Dreieck zu erstellen und die beiden dann durch a zu verbinden Rechteck Aus dem Dreieck entsteht letztlich ein Parallelogramm. Warum können Dreiecke mithilfe von Rändern erzeugt werden? Schauen wir uns zunächst ein Bild an:

Nachdem Sie sich den Veränderungsprozess der drei kleinen Formen im Bild angesehen haben, sollten Sie bereits die Hälfte davon kennen. Tatsächlich sind beim Hacken nur zwei Bedingungen erforderlich, um ein Dreieck zu erstellen. Erstens sind die Länge und Breite des Elements selbst 0. Zweitens werden die unnötigen Teile durch die Randfarbe ausgeblendet. Mit einer ähnlichen Methode können Sie auch Trapeze erstellen. Der Code für die drei Formen im obigen Bild lautet wie folgt.

#first {

width: 20px;

height: 20px;

border-width: 10px;

border-style : einfarbig;

Rahmenfarbe: Rot, Grün, Blau, Braun;

}

#Sekunde {

Breite: 0;

Höhe: 0;

Rahmenbreite: 10 Pixel;

Rahmenstil: einfarbig;

Rahmenfarbe: rot grün blau braun;

}

#third {

width: 0;

height: 0;

border-width: 10px;

border-style : solid;

border-color: red transparent transparent transparent;

}

Der nächste Schritt besteht darin, zu überlegen, wie ein Parallelogramm gespleißt wird. Bei der Randmethode besteht es aus drei Teilen, nämlich dem linken Dreieck, dem Rechteck und dem rechten Dreieck. Es wäre zu umständlich, jedes Mal, wenn ein Parallelogramm gezeichnet wird, drei Elemente zu erstellen, daher sind die Pseudoelemente :before und :after hier eine gute Wahl. Lassen Sie uns diesen Effekt erzielen:

Um Dreiecke und Rechtecke nahtlos miteinander zu verbinden, müssen mehrere Attribute konsistent sein. Verwenden Sie daher etwas wie Less, Sass, Stylus usw. Das wird es Es ist einfacher zu warten, wenn Sie zum Schreiben dieses Codes einen CSS-Präprozessor verwenden. Die Scss-Version des Codes ist unten angegeben.

//Die Breite und Höhe des Dreiecks

$height: 24px;

$width: 12px;

//Passen Sie die Farben an drei Teile des Parallelogramms Zuweisung

@mixin parallelogram-color($color) {

background: $color;

&:before { border-color: transparent $color $color transparent; }

&:after { border-color: $color transparent $color }

//Stil eines einzelnen Dreiecks

@mixin Triangle () {

Inhalt: '';

Anzeige: Block;

Breite: 0;

Höhe: 0;

Position: absolut;

Rahmenstil: fest;

Rahmenbreite: $height/2 $width/2;

oben: 0 ;

}

//Stil des Parallelogramms

.para {

display: inline-block;

position: relative;

padding: 0 10px;

height: $height;

line-height: $height;

margin-left: $width;

Farbe: #fff;

&:nach {

@include Dreieck();

rechts: -$width;

}

&:vor {

@include Dreieck();

links: -$width;

}

@include Parallelogramm -color(red) ;

}

Es ist zu beachten, dass, wenn die durch $height und $width festgelegte Neigung des Dreiecks zu klein oder zu groß ist, es zu Aliasing im kommen kann Rendering, daher müssen Sie die Unterschiede testen, bevor Sie es verwenden. Welchen visuellen Effekt erzielen Sie durch die Breite und Höhe?

Wenn Sie Web-Frontend-Technologien wie HTML5 erlernen und kommunizieren möchten und mehr über Frontend-Inhalte erfahren möchten, können Sie unserer QQ-Lerngruppe beitreten: 27062964, gemeinsam lernen und kommunizieren, sich verbessern Außerdem stehen Lernmaterialien und Quellcode-Austausch zur Verfügung. Oder klicken Sie auf den Link, um der Gruppe direkt beizutreten:

Zweite Methode: Verwenden Sie Transformation

Verwenden Sie Transformation, um ein Parallelogramm zu implementieren:

Nachdem ich es gesehen hatte, fand ich es erstaunlich. Es stellte sich heraus, dass es nur die Umrisse eines Parallelogramms haben kann. (Da Methode 1 nur Parallelogramme mit Fülleffekten erstellen kann) Sie ist sehr einfach zu implementieren, hauptsächlich mit Hilfe von transform:skew(...). Werfen wir einen Blick auf den Quellcode.

.city {

display: inline-block;

padding: 5px 20px;

rand: 1px solid #44a5fc ;

Farbe: #333;

Transformation: Schräge (-20 Grad);

}

Shanghai

Also haben wir diesen Effekt erhalten:

Sie müssen so denken, wenn Sie das Bild sehen:

Keine Sorge, wir haben tatsächlich das gesamte Div verzerrt, was dazu geführt hat, dass der Text in der Mitte schief ist, und das ist offensichtlich nicht der Effekt, den wir wollen. Wir müssen also ein inneres Element hinzufügen und das innere Element umgekehrt verzerren, um den gewünschten Effekt zu erzielen:

Der Implementierungscode lautet wie folgt, und ein CodePen ist beigefügt Beispiel

.city {

display: inline-block;

padding: 5px 20px;

border: 1px solid # 44a5fc;

Farbe: #333;

Transformation: Skew(-20deg);

}

.city div {

Transformation: Schräglage (20 Grad);

}

Shanghai

Zusammenfassung

Die erste Methode verwendet den Randattribut-Hack, um ein Dreieck zu erstellen, und realisiert schließlich ein Parallelogramm durch Zusammenfügen dreier Elemente. Die zweite Methode verwendet dann transform: skew um das Parallelogramm zu erhalten. Insgesamt ist die zweite Methode viel kleiner als die erste Methode und leicht zu verstehen. Der einzige Nachteil besteht darin, dass keine Trapeze erstellt werden können, wie sie bei der Paginierung dieser Website verwendet werden.

Ich hoffe, dieser Artikel ist hilfreich für Sie.

Wenn Sie während des Lernprozesses auf Probleme stoßen oder Lernressourcen erhalten möchten, können Sie gerne der Lernaustauschgruppe beitreten

Das obige ist der detaillierte Inhalt vonWie implementiert man Dreiecke und Parallelogramme mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!