Wie kann ich mit nur einem HTML-Element eine längliche sechseckige Schaltfläche mit Pfeilen erstellen?

Erstellen einer länglichen sechseckigen Schaltfläche mit einem einzelnen HTML-Element

Problem:

Entwerfen Sie eine Schaltfläche mit einer länglichen sechseckigen Form und Pfeilen an beiden Enden, wobei Sie nur ein HTML-Element verwenden CSS.

Herausforderung:

Die Verwendung beider :before- und :after-Elemente würde zwei Pfeile auf einer Seite erzeugen, was ein zusätzliches Element erforderlich machen würde. Darüber hinaus ist die Ausrichtung und Größe der Pfeile problematisch.

Lösung mit einem einzelnen Element:

Um diese Herausforderungen anzugehen, wurde ein alternativer Ansatz entwickelt, der zwei darin enthaltene Pseudoelemente verwendet ein einzelnes Element:

1. Pseudo-Elemente: Das :before und :after-Pseudoelemente, beide halb so groß wie die Hauptschaltfläche, bilden die obere und untere Hälfte der Form.
2. Positionierung: Das :before-Element wird oben mit platziert eine Perspektive und Drehung, um den Winkeleffekt zu erzielen. Das :after-Element wird unten positioniert und gedreht, um den entgegengesetzten Winkel zu erzeugen.
3. Randmanipulation: Durch Entfernen des Randes an bestimmten Punkten entsteht das Aussehen eines Sechsecks mit Pfeilen, die sich nach oben erstrecken an beiden Enden.

Beispielcode:

.button {
  position: relative;
  display: block;
  background: transparent;
  width: 300px;
  height: 80px;
  ...

  .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;
  }
  .button.border:after {
    border-top: none;
  }

  /* Button hover styles */

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

Damit Mit diesem Ansatz kann der längliche, sechseckige Button mit nur einem HTML-Element und CSS erstellt werden, ohne dass zusätzliche Elemente erforderlich sind.

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