Wie kann ich in CSS ohne JavaScript dreieckige, abgerundete Dreiecke erstellen?

Erstellen von dreieckigen, abgerundeten Dreiecken in CSS

Das Erstellen benutzerdefinierter farbiger Formen mit abgerundeten Ecken ohne JavaScript kann eine Herausforderung sein. Um dieses Problem anzugehen, können CSS-Techniken eingesetzt werden, um optisch ansprechende Dreiecke mit der gewünschten Ästhetik zu generieren.

Ein Ansatz zum Erstellen eines dreieckigen abgerundeten Dreiecks besteht darin, mehrere Elemente mit sorgfältig gestalteten Transformationen und Formanpassungen zu verwenden. Durch die Verwendung der :before- und :after-Pseudoelemente können Sie die Illusion eines einzelnen, einzigartig geformten Elements erzeugen.

Hier ist eine raffinierte Lösung, die pixelgenaue Ergebnisse in jeder Größe bietet:

.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%);
}

Mit diesem Ansatz können Sie ganz einfach vielseitige und optisch ansprechende Dreiecke erstellen und so die Ästhetik Ihrer Webdesigns verbessern.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS ohne JavaScript dreieckige, abgerundete Dreiecke erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!