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

Erstellen einer länglichen sechseckigen Schaltfläche mit nur einem Element

Problem:

Kann Sie erstellen eine sechseckige Schaltfläche ausschließlich mit HTML und CSS, ohne auf mehrere zurückgreifen zu müssen Elemente?

Mögliche Lösung:

Unten finden Sie eine alternative Methode, um diesen Effekt mit nur einem einzigen Element zu erzielen:

1. Nutzen Sie Pseudoelemente: Setzen Sie :before und :after Pseudoelemente ein, die die halbe Größe der Hauptschaltfläche imitieren, einschließlich Ränder.
2. Formhälften definieren: Das :before-Element bildet die obere Hälfte der Form, während :after die untere Hälfte bildet. Jedes hat eine bestimmte Höhe und Randanordnung, um einem Sechseck zu ähneln.
3. Neigung und Position: RotateX mit Perspektive wird verwendet, um die Pseudoelemente zu neigen und sie entsprechend zu positionieren, um die Gesamtform der Schaltfläche zu bilden .

Beispiel Code:

/* General Button Style */
.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 {
  border: 4px solid #e04e5e;
}

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

.button.border:hover {
  color: #fff;
}

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

Hinweis: Um Browser-Präfixe zu verwenden, schließen Sie modernizr oder Präfixe ein.

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