Comment créer un triangle aux coins arrondis en utilisant uniquement HTML et CSS ?

Comment créer un triangle à trois coins arrondis en utilisant HTML et CSS

Pour créer un triangle à trois coins arrondis sans utiliser JavaScript, vous peut utiliser des transformations CSS et faire pivoter, incliner et mettre à l'échelle un élément HTML div.

Voici un exemple de code HTML et CSS que vous pouvez utiliser :

<div class="triangle"></div>

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

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

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

Ce code créera un triangle aux coins arrondis qui évoluera et conservera parfaitement sa forme à n'importe quelle taille. Il utilise des mathématiques plus simples que la solution originale et offre une approche intuitive pour créer l'effet souhaité.

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!