Wie kann ich ein responsives CSS-Dreieck mit einer prozentualen Breite erstellen?

Responsives CSS-Dreieck mit prozentualer Breite

In CSS können wir ein Dreieck mithilfe von Rahmen erstellen, indem wir unterschiedliche Breiten für die Ober- und Unterseite festlegen untere Ränder. Wenn Sie jedoch Prozentsätze für die Linkbreite verwenden, kann die Größe des Pfeils nicht dynamisch basierend auf dem Inhalt des Links angepasst werden.

Lösung: Prozentbasiertes Dreieck

So erstellen Sie ein Da es sich um ein responsives Dreieck handelt, das seine Größe an den Inhalt des Links anpasst, können wir ein Pseudoelement mit einer Schräge und einer Drehung verwenden Transformation:

.btn {
  ...
  padding-bottom: 15%;
  ...
}

.btn:after {
  content: "";
  ...
  padding-bottom: 50%;
  ...
  transform: rotate(-30deg) skewX(30deg);
}

Erklärung:

• Das Pseudoelement ist absolut positioniert und seine Hintergrundfarbe wird vom Link geerbt.
• Die Eigenschaft „padding-bottom“ (in diesem Beispiel 15 %) legt die Höhe des Dreiecks als Prozentsatz der Höhe des Links fest Breite.
• Durch Neigen und Drehen des Dreiecks entsteht die gewünschte Form.
• Der negative Z-Index stellt sicher, dass sich das Dreieck hinter dem Linkinhalt befindet.

Vorteile:

• Die Größe des Dreiecks wird automatisch basierend auf dem Link angepasst Breite.
• Das Seitenverhältnis des Dreiecks bleibt erhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich ein responsives CSS-Dreieck mit einer prozentualen Breite erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!