implémentation du triangle CSS

CSS fait partie intégrante du développement front-end. Qu’il s’agisse de composition, de mise en page ou de conception de style, CSS est requis. Dans la conception de styles, nous devons souvent utiliser des graphiques de formes diverses, notamment des rectangles, des cercles, des triangles, etc. La réalisation de formes triangulaires est une technologie relativement niche en CSS. Aujourd'hui, nous allons discuter de la façon d'utiliser CSS pour réaliser des formes triangulaires.

1. Utilisez l'attribut border pour implémenter des triangles

L'attribut border du CSS nous permet de définir la bordure d'une boîte. Nous pouvons utiliser les caractéristiques de cet attribut pour obtenir une forme triangulaire. La méthode d'implémentation spécifique est la suivante :

.triangle {
  width: 0;
  height: 0;
  border-width: 20px 20px 0 20px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
}

Tout d'abord, nous définissons une boîte avec une largeur et une hauteur de 0, qui est notre triangle. Ensuite, nous avons défini la propriété border-width, en définissant la bordure inférieure du triangle sur une largeur de 20 px, les bordures gauche et droite sur une largeur de 20 px et la bordure supérieure sur 0. De cette façon, nous obtenons un triangle isocèle avec une longueur de côté inférieur de 40 px et une hauteur de 20 px. Ensuite, nous définissons la couleur de la bordure sur noir et la couleur de la bordure supérieure sur transparente, complétant ainsi un simple triangle.

2. Utiliser des pseudo-classes pour implémenter des triangles

Le triangle implémenté par la méthode ci-dessus est relativement simple, mais seul un triangle isocèle peut être obtenu . Si nous voulons implémenter d’autres formes de triangles, ou si nous devons y ajouter du texte ou des icônes, nous devons utiliser des pseudo-classes.

On peut utiliser ::before et ::after pour étendre le sélecteur de pseudo-classe d'un élément. Grâce à ces deux sélecteurs de pseudo-classe, nous pouvons générer de nouveaux éléments à l'intérieur d'un élément et définir des styles sur les nouveaux éléments.

Nous pouvons utiliser ::before ou ::after pour générer un triangle et définir la forme du triangle en définissant les propriétés de largeur, de hauteur et de bordure. Dans le même temps, nous pouvons également définir le contraste de la couleur de la bordure et de la couleur du conteneur pour obtenir différents styles de triangles.

.triangle {
  position: relative;
  width: 40px;
  height: 40px;
  background-color: #000;
}

.triangle::before {
  content: "";
  width: 0;
  height: 0;
  border-width: 0 20px 20px 20px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  bottom: -20px;
  left: 0;
}

Dans le code ci-dessus, nous définissons d'abord un conteneur avec une largeur et une hauteur de 40px et une couleur de fond noire. Ensuite, nous utilisons la pseudo-classe ::before pour générer un triangle, définissons la bordure supérieure du triangle sur blanche et définissons la bordure droite, la bordure gauche et la bordure inférieure sur transparentes. Le positionnement du triangle s'obtient en réglant le bas et la gauche.

3. Utilisez l'attribut clip-path pour implémenter des triangles

En CSS3, nous pouvons également utiliser l'attribut clip-path pour implémenter des formes triangulaires. L'attribut clip-path peut définir la zone de découpage d'un élément et découper la zone d'affichage de l'élément selon le chemin défini pour obtenir différentes formes.

On peut utiliser la fonction polygon() pour définir un polygone. Cette fonction accepte un nombre indéfini de paramètres. Chaque paramètre est une valeur de coordonnée. La valeur de coordonnée peut être une unité de longueur telle que px, em, rem ou un pourcentage.

.triangle {
  width: 0;
  height: 0;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  background-color: #000;
}

Dans le code ci-dessus, nous définissons d'abord une boîte avec une largeur et une hauteur de 0, puis utilisons l'attribut clip-path pour découper la boîte dans un triangle. Dans la fonction polygon(), nous définissons les coordonnées de trois points, et les lignes reliant ces trois points sont les trois côtés du triangle. Les coordonnées des trois points sont (50 % 0 %), (0 % 100 %) et (100 % 100 %), qui représentent le sommet et les deux coins inférieurs du triangle.

Étant donné que la compatibilité actuelle de l'attribut clip-path n'est pas très bonne, si vous devez utiliser cet attribut dans une version inférieure du navigateur, vous pouvez utiliser des graphiques SVG à la place.

Les trois méthodes ci-dessus peuvent être utilisées pour obtenir la forme du triangle. La méthode spécifique à choisir doit être déterminée en fonction des besoins réels. Dans le développement réel, nous pouvons combiner divers attributs et méthodes pour obtenir des styles de triangles plus complexes.

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!