Comment puis-je créer un triangle arrondi à trois coins en utilisant uniquement CSS ?

Créer un triangle arrondi à trois coins en CSS

Créer des formes personnalisées à l'aide de CSS sans JavaScript peut être un défi, en particulier lorsque l'on vise une précision parfaite au pixel près. Une tâche courante consiste à créer un triangle arrondi à trois coins, qui peut être approché à l'aide de diverses techniques.

Solution CSS uniquement :

Pour obtenir un triangle à trois coins -triangle arrondi utilisant du CSS pur, envisagez la solution suivante :

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

Cette méthode utilise des transformations CSS, une inclinaison et une mise à l'échelle pour créer la forme désirée. Il offre une précision au pixel près et est relativement intuitif à comprendre.

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!