Partage de technologie

Comment dessiner un triangle en utilisant CSS3 ?

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Pour dessiner un triangle en utilisant CSS3, vous pouvez utiliser les propriétés border et transparent border de l'élément pour y parvenir. Voici un exemple de code simple :

  1. .triangle {
  2.     width: 0;
  3.     height: 0;
  4.     border-left: 50px solid transparent; /* 左边框为透明,控制三角形的左斜边 */
  5.     border-right: 50px solid transparent; /* 右边框为透明,控制三角形的右斜边 */
  6.     border-bottom: 100px solid #f00; /* 底边框为实色,控制三角形的底边 */
  7. }

Dans cet exemple, nous créons un élément avec une largeur de 0 et une hauteur de 0, et définissons trois bordures pour contrôler l'hypoténuse gauche, l'hypoténuse droite et la base du triangle. En ajustant la largeur et la couleur de la bordure, vous pouvez dessiner différents styles de triangles.

Vous pouvez appliquer le code ci-dessus à un élément HTML, par exemple :

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

Cela affichera un triangle sur la page.