Wie kann ich nur mit CSS ein dreieckiges, abgerundetes Dreieck erstellen?

Dreieckige abgerundete Dreiecke mit CSS erstellen

In diesem Artikel befassen wir uns mit der Herausforderung, dreieckige Dreiecke in benutzerdefinierten Farben zu erstellen abgerundete Dreiecke mit reinem CSS, ohne JavaScript- oder HTML5-Canvas-Unterstützung.

Problem Aussage

Das Ziel besteht darin, eine Form wie die unten gezeigte zu erstellen, ohne auf Bildüberlagerungen oder JS-basierte Techniken zurückzugreifen.

[Bild eines dreieckigen abgerundeten Dreiecks]

Lösung

Hier ist eine elegante CSS-Lösung, die vom Original des Autors inspiriert ist Idee:

.triangle {
  position: relative;
  background-color: orange;
  text-align: left;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  background-color: inherit;
}

.triangle,
.triangle:before,
.triangle:after {
  width: 10em;
  height: 10em;
  border-top-right-radius: 30%;
}

.triangle {
  transform: rotate(-60deg) skewX(-30deg) scale(1, .866);
}

.triangle:before {
  transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
}

.triangle:after {
  transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
}

Erklärung

Diese Lösung kombiniert mehrere CSS-Transformationen, um die gewünschte Form zu erreichen:

• .triangle : Definiert das Basisdreieck und legt seinen Hintergrund fest Farbe.
• .triangle:before, .triangle:after: Zwei Pseudoelemente für die zusätzlichen Ecken hinzugefügt.
• Prozentbasierte Abmessungen : Alle Elemente haben eine Breite und Höhe von 10 cm, um eine gleichmäßige Skalierung zu gewährleisten Größe.
• Border-top-right-radius: Legt den Radius der oberen rechten Ecke fest und erzeugt so den abgerundeten Effekt.
• Transformationen: Eine Reihe von Drehungen, Schrägstellungen und Skalierungen werden angewendet, um das Dreieck zu drehen und seine ovale Form anzupassen. Die spezifischen Werte müssen je nach gewünschtem Seitenverhältnis möglicherweise geringfügig angepasst werden.

Das Endergebnis ist ein pixelgenaues, dreieckiges, abgerundetes Dreieck, das vollständig mit CSS erstellt wurde.

Das obige ist der detaillierte Inhalt vonWie kann ich nur mit CSS ein dreieckiges, abgerundetes Dreieck erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!