Wie kann ich mit nur einem HTML-Element und CSS eine längliche Sechseck-Schaltfläche erstellen?

Erstellung von länglichen Sechseck-Schaltflächen mit einem einzelnen Element

In der Webentwicklung kann das Erstellen benutzerdefinierter Schaltflächenformen eine Herausforderung sein, insbesondere wenn nur CSS verwendet wird und das Vermeiden zusätzlicher HTML-Elemente. Ein häufiges Dilemma entsteht, wenn versucht wird, einen sechseckigen Knopf mit länglichen Pfeilspitzen auf beiden Seiten herzustellen.

Bestehende Ansätze

Eine Standardmethode besteht darin, sowohl :before als auch :after pseudo zu verwenden -Elemente, um einen einzelnen Pfeil auf einer Seite zu erzeugen. Dies erfordert jedoch die Einbeziehung eines weiteren span-Elements in den Link, um einen Pfeil auf der gegenüberliegenden Seite zu erstellen, was die Lösung verkompliziert.

Ein alternativer Ansatz besteht darin, einen Bandanfangsrand mithilfe von :after und :before zu erstellen Pseudoelemente mit leicht schrägen Winkeln. Diese Methode führt jedoch oft zu einer Fehlausrichtung und ungleichmäßigen Pfeilspitzenlängen.

Verbesserte Einzelelementlösung

Hier ist ein verfeinerter Ansatz, der nur ein Element verwendet, um das gewünschte Sechseck zu erreichen Taste Form:

Code:

HTML:

<a href="#" class="button ribbon-outset border">Click me!</a>

CSS:

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  font-size: 20px;
  text-decoration: none;
  text-transform: uppercase;
  color: #e04e5e;
  margin: 40px auto;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
}

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

.button:before {
  transform: perspective(15px) rotateX(3deg);
}
.button:after {
  top: 40px;
  transform: perspective(15px) rotateX(-3deg);
}

/* Button Border Style */

.button.border:before,
.button.border:after {
  border: 4px solid #e04e5e;
}
.button.border:before {
  border-bottom: none; /* to prevent the border-line showing up in the middle of the shape */
}
.button.border:after {
  border-top: none; /* to prevent the border-line showing up in the middle of the shape */
}

/* Button hover styles */

.button.border:hover:before,
.button.border:hover:after {
  background: #e04e5e;
}
.button.border:hover {
  color: #fff;
}

Erklärung:

• Zwei Pseudoelemente (:before and :after) werden verwendet, jeweils mit einer Höhe von 34 Pixeln (einschließlich Rändern) und einer Breite von 300 Pixeln (die Breite der Schaltfläche).
• Die obere Hälfte der Form wird erstellt, indem das :before-Element mithilfe von „rotateX“ leicht angehoben wird (3deg).
• Die untere Hälfte wird durch das :after-Element gebildet, das mit rotationX(-3deg) angehoben und um versetzt wird 40 Pixel, um sie am oberen Rand der Schaltfläche auszurichten.
• Beide Pseudoelemente erhalten einen linken Versatz von 0 Pixel und einen Z-Index von -1, um sicherzustellen, dass sie sich überlappen und die sechseckige Form erzeugen.
• Randstile werden auf das Schaltflächenelement angewendet, um den dünnen Rand zu erstellen (mit 4 Pixel Vollton #e04e5e) und um die Ränder der Pseudoelemente unsichtbar zu machen (keine für unten und). obere Ränder).
• Beim Hover wird der Hintergrund der Pseudoelemente in #e04e5e geändert und die Textfarbe der Schaltfläche wird weiß.

Diese Technik erzeugt effektiv ein längliches Sechseck. Geformte Schaltfläche, die nur CSS und ein einziges HTML-Element verwendet und eine klare und prägnante Lösung für die Designherausforderung bietet.

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