Comment puis-je créer des triangles à 3 coins arrondis en CSS sans JavaScript ?

Créer des triangles arrondis à 3 coins en CSS

Réaliser des formes de couleur personnalisée avec des coins arrondis sans JavaScript peut être un défi. Pour résoudre ce problème, des techniques CSS peuvent être utilisées pour générer des triangles visuellement attrayants avec l'esthétique souhaitée.

Une approche pour créer un triangle arrondi à 3 coins consiste à utiliser plusieurs éléments avec des transformations et des ajustements de forme soigneusement conçus. En utilisant les pseudo-éléments :before et :after, vous pouvez créer l'illusion d'un élément unique de forme unique.

Voici une solution raffinée qui offre des résultats au pixel près, quelle que soit la taille :

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

En utilisant cette approche, vous pouvez créer facilement des triangles polyvalents et visuellement attrayants, améliorant ainsi l'attrait esthétique de vos conceptions Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!