So verwenden Sie transform skewX in CSS3, um ein Parallelogramm-Navigationsmenü zu implementieren

Der Inhalt dieses Artikels befasst sich mit der Verwendung von Transform SkewX in CSS3, um ein Parallelogramm-Navigationsmenü zu implementieren. Ich hoffe, dass er für Sie hilfreich ist.

Ein Parallelogramm ist eigentlich eine Obermenge eines Rechtecks: Seine Seiten sind paarweise parallel, aber seine Winkel sind nicht unbedingt rechte Winkel. Im visuellen Design können Parallelogramme oft ein Gefühl von Bewegung vermitteln.
Versuchen wir, mithilfe von CSS einen schaltflächenähnlichen Parallelogramm-Link zu erstellen. Unser Ausgangspunkt ist eine gewöhnliche Blockschaltfläche, ergänzt durch einige einfache Stile. Dann können wir die Verformungseigenschaft von skew() verwenden, um das Rechteck diagonal zu strecken:

transform: skewX(-45deg);

Dies führt jedoch dazu, dass auch sein Inhalt verzerrt wird seitwärts, was unansehnlich und schwer lesbar ist. Gibt es eine Möglichkeit, die Form des Behälters einfach zu neigen, während der Inhalt gleich bleibt?

Viele Leute werden an die Lösung mit verschachtelten Elementen denken. Dann können wir eine weitere Reverse Skew()-Verformung auf den Inhalt anwenden, um den Verformungseffekt des Containers auszugleichen, und schließlich die erwarteten Ergebnisse erzielen. Leider bedeutet dies, dass wir eine zusätzliche Ebene von HTML-Elementen verwenden müssen, um den Inhalt zu umschließen, z. B. einen Span:

<a href="m.sbmmt.com" class="button">
 <span>m.sbmmt.com</span>
</a>
.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

Wie wir sehen können, funktioniert diese Methode sehr gut, bedeutet aber auch, dass So Wir müssen zusätzliche HTML-Elemente hinzufügen. Wenn Änderungen an der Strukturschicht nicht zulässig sind oder Sie die Reinheit der Strukturschicht strikt beibehalten möchten, machen Sie sich keine Sorgen, wir haben auch eine reine CSS-Lösung.

Pseudoelementlösung

Eine andere Idee besteht darin, alle Stile (Hintergrund, Rahmen usw.) auf Pseudoelemente anzuwenden und die Pseudoelemente dann zu transformieren. Da unser Inhalt nicht in einem Pseudoelement enthalten ist, ist der Inhalt von der Transformation nicht betroffen. Mal sehen, ob diese Technik den gleichen Linkstil wie zuvor erzielen kann.

Wir möchten, dass Pseudoelemente flexibel bleiben und automatisch die Abmessungen ihres Hostelements erben, selbst wenn die Abmessungen des Hostelements durch seinen Inhalt bestimmt werden. Eine einfache Lösung besteht darin, den Stil „position:relativ“ auf das Hostelement anzuwenden und „position:absolut“ auf das Pseudoelement festzulegen und dann alle Offsets auf Null zu setzen, sodass es sowohl horizontal als auch vertikal auf die Größe des Hostelements gestreckt wird. Der Code sieht so aus:

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

An diesem Punkt überlappt das mit dem Pseudoelement generierte Quadrat den Inhalt. Sobald ein Hintergrund dafür festgelegt ist, wird der Inhalt abgedeckt. Um dieses Problem zu beheben, können wir den z-index: -1-Stil für das Pseudoelement so festlegen, dass seine Stapelebene hinter das Hostelement verschoben wird. Der letzte Schritt, den wir jetzt tun müssen, besteht darin, es so weit zu verändern, wie wir möchten, und uns an den schönen Ergebnissen zu erfreuen. Die endgültige Version des Codes lautet wie folgt, und der visuelle Effekt, den er erzeugt, ist genau der gleiche wie die oben erwähnte Technik:

.button {
 position: relative;
 /* 其他的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

Diese Technik ist nicht nur für die skew()-Verformung nützlich, sondern gilt auch für alle anderen Ein anderer Verformungsstil, der verwendet werden kann, wenn wir ein Element verformen möchten, ohne seinen Inhalt zu verformen. Wenn wir diese Technik beispielsweise leicht an den Verformungsstil „rotate()“ anpassen und sie dann auf ein quadratisches Element anwenden, können wir leicht eine Rautenform erhalten.

Der Schlüssel zu dieser Technik besteht darin, dass wir Pseudoelemente und Positionierungsattribute verwenden, um eine Box zu erstellen, dann das Pseudoelement zu formatieren und es unter seinem Hostelement zu platzieren. Diese Idee kann auch in anderen Szenen verwendet werden, um verschiedene Effekte zu erzielen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie transform skewX in CSS3, um ein Parallelogramm-Navigationsmenü zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!