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

Réalisation de triangles arrondis à trois coins avec CSS

Dans cet article, nous relèverons le défi de créer des triangles arrondis à trois coins de couleur personnalisée triangles arrondis utilisant du CSS pur, sans support de canevas JavaScript ou HTML5.

Problème Déclaration

L'objectif est de créer une forme comme celle présentée ci-dessous sans recourir à des superpositions d'images ou à des techniques basées sur JS.

[Image d'un triangle arrondi à trois coins]

Solution

Voici une solution CSS élégante inspirée de l'original de l'auteur idée :

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

Explication

Cette solution combine plusieurs transformations CSS pour obtenir la forme souhaitée :

• .triangle  : Définit le triangle de base et définit son arrière-plan couleur.
• .triangle:before, .triangle:after : Deux pseudo-éléments ajoutés pour les coins supplémentaires.
• Dimensions basées sur un pourcentage : Tous les éléments ont une largeur et une hauteur de 10 em pour garantir qu'ils évoluent de manière égale à tout moment. size.
• Border-top-right-radius : Définit le rayon du coin supérieur droit, créant l'effet arrondi.
• Transformations : Une série de rotations, d'inclinaisons et d'échelles sont appliquées pour faire pivoter le triangle et ajuster sa forme ovale. Les valeurs spécifiques peuvent nécessiter de légers ajustements en fonction du rapport hauteur/largeur souhaité.

Le résultat final est un triangle arrondi à trois coins au pixel près, entièrement conçu avec CSS.

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!