Wie erstelle ich eine längliche Sechseck-Schaltfläche mit Pfeilen nur mit CSS?

Länglicher sechseckiger Knopf mit einem einzelnen Element

Herausforderung:

Unser Ziel ist es, ein längliches Sechseck zu schaffen. Geformte Schaltfläche nur mit CSS, ohne auf zusätzliche Elemente angewiesen zu sein. Die Schaltfläche sollte einen verlängerten, bandartigen Rand mit Pfeilen aufweisen, die auf beiden Seiten nach außen zeigen.

Lösung 1 (in der Frage bereitgestellt):

Dieser Ansatz verwendet zwei Pseudo- -elements (::before und ::after) zum Erstellen der Bandränder. Dies führt jedoch zu einer Asymmetrie und einer falschen Zentrierung der Pfeilspitzen.

Verbesserte Lösung:

Um das Design zu verfeinern und die Einschränkungen zu beseitigen, schlagen wir eine alternative Lösung vor, die verwendet eine andere CSS-Strategie:

Konzept:

Dieser Ansatz beinhaltet:

1. Verwendung von Pseudoelementen ::before und ::after, die halb so groß sind wie das Hauptschaltflächenelement.
2. Positionierung dieser Pseudoelemente, um die Ober- und Unterseite zu bilden Hälften des Sechsecks.
3. Einsatz von rotationX mit Perspektive, um die gewünschte Neigung zu erreichen Wirkung.

Implementierung:

/* General Button Style */

.button {
  /* Properties as before... */
}

/* Pseudo-elements */

.button:before,
.button:after {
  position: absolute;
  content: '';
  width: 300px;
  left: 0px;
  height: 34px;
  z-index: -1;
}

.button:before {
  /* Top half; adjust rotation here... */
}

.button:after {
  /* Bottom half; adjust rotation here... */
  top: 40px;
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  /* Properties as before... */
}

/* Etc., omitted for brevity */

Erklärung:

• Die Pseudoelemente sind absolut innerhalb des Hauptschaltflächenelements platziert.
• Das obere Pseudoelement wird im Uhrzeigersinn gedreht, während das untere im Uhrzeigersinn gedreht wird gegen den Uhrzeigersinn gedreht, wodurch der Eindruck einer Neigung entsteht.
• Die Ränder werden auf die Pseudoelemente angewendet, wodurch die sechseckige Form entsteht.
• Dieses Design ermöglicht eine vollständige Anpassung der Form und Abmessungen der Schaltfläche durch Anpassen der Breite und Höhe der Pseudoelemente sowie ihrer Transformationseigenschaften.

Das obige ist der detaillierte Inhalt vonWie erstelle ich eine längliche Sechseck-Schaltfläche mit Pfeilen nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!