Comment créer un triangle en CSS ?-tutoriel CSS-php.cn

Comment créer un triangle en CSS ?

王林

Libérer： 2023-09-01 09:33:03

avant

1098 Les gens l'ont consulté

Comment créer un triangle en CSS ?

Le triangle est une forme de base en géométrie et peut être utilisé pour créer diverses conceptions dans le développement Web. En CSS, vous pouvez créer des triangles en utilisant quelques techniques simples. Dans cet article, nous apprendrons deux techniques pour créer des triangles en CSS.

Créez des triangles en utilisant des bordures
Créez des triangles à l'aide de chemins de détourage

Créez des triangles en utilisant des bordures

Le moyen le plus simple de créer des triangles en CSS est d'utiliser la propriété border. Nous pouvons rapidement créer une forme triangulaire de base en créant un élément rectangulaire puis en utilisant la propriété border pour créer l'hypoténuse du triangle. Voici un exemple de création d'un triangle équilatéral à l'aide de bordures -

Exemple 1

Créez un triangle équilatéral en CSS en utilisant la propriété border.

<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .triangle {
         margin:auto;
         width: 0;
         height: 0;
         border-bottom: 100px solid red;
         border-left: 50px solid transparent;
         border-right: 50px solid transparent;
      }
   </style>
</head>
   <body>
      <h3>Equilateral Triangle Example Using Border Property</h3>
      <div class="triangle"></div>
   </body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé un div avec la classe .triangle et défini la largeur et la hauteur de l'élément sur 0 car nous utiliserons la propriété border pour créer le triangle. Nous définissons la propriété border-bottom pour créer la base du triangle, et les propriétés border-left et border-right pour créer le bord incliné. En définissant les bordures gauche et droite sur transparentes, nous créons un bord diagonal incliné vers le centre de l'élément.

Créez des triangles à l'aide de chemins de détourage

Nous pouvons également créer des triangles en CSS en utilisant la propriété clip-path. Cette propriété nous permet de définir un chemin de détourage personnalisé pour l'élément, qui peut être utilisé pour créer diverses formes, y compris des triangles.

Exemple 2

Voici un exemple de création d'un triangle scalène à l'aide de chemins de détourage.

<html>
<head>
   <style>
      body {
         text-align: center;
      }
      .triangle {
         margin: auto;
         padding: 10%;
         border-radius: 2%;
         width: 10%;
         box-shadow: inset 0 0 80px violet;
         clip-path: polygon(50% 0, 100% 100%, 0% 100%);
      }
   </style>
</head>
   <body>
      <h3>Equilateral Triangle Example Using Border Property</h3>
      <div class="triangle"></div>
   </body>
</html>

Copier après la connexion

Dans l'exemple ci-dessus, nous avons créé un div avec la classe .triangle et défini la largeur et la hauteur de l'élément sur 0 car nous utiliserons les propriétés border et Clip-path pour créer des triangles. Nous définissons la propriété border-radius pour créer un bord incliné, puis utilisons la propriété Clip-path pour découper l'élément rectangulaire dans un triangle en spécifiant les coordonnées des trois sommets. La fonction Polygone prend en argument une liste de coordonnées x,y, chaque point étant séparé par des virgules.

Conclusion

Créer des triangles en HTML et CSS est une compétence précieuse pour les développeurs Web. En utilisant les propriétés de bordure et de chemin de détourage, nous pouvons rapidement créer des triangles équilatéraux et scalènes de base pour améliorer la conception visuelle d'une page 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!