Explication détaillée d'exemples d'utilisation de CSS pour obtenir un effet triangulaire

Méthode 1 : Utilisez la bordure pour définir la bordure. L'élément a une hauteur et une largeur

<i class="triangle"></i>

.triangle {    
     transform: rotate(45deg);    
     display: block;    
     width: 12px;    
     height: 12px;    
     border: 1px solid #9e9e9e;    
     border-top-color: transparent;    
     border-right-color: transparent;    
     background-color: #fff;    
}

Effet :

Utilisez l'attribut de transformation pour faire pivoter le triangle afin d'obtenir l'effet souhaité.

Méthode 2 : Utiliser la bordure pour soutenir le triangle

<i class="triangle"></i>

.triangle {    
     display: block;    
     position: absolute;    
     width: 0;    
     border-width: 6px;    
     border-color: transparent transparent red;    
     border-style: dashed dashed solid;    
     top: -12px;    
     right: 76px;    
}

Effet :

Scénario d'application : Cliquez sur 234 ou cliquez pour sélectionner le triangle pointant vers l'option correspondante

Conseils :

1. Apprenez à utiliser souvent des pseudo-éléments tels qu'après ou avant pour implémenter des triangles

2. La différence entre les deux méthodes : La couleur d'arrière-plan du triangle et la couleur de la bordure définie par la deuxième méthode sont les mêmes ; la première méthode est la même que la couleur des bordures. Les couleurs des bordures peuvent être différentes ; la méthode doit être sélectionnée en fonction des effets des différents scénarios d'application.

La deuxième méthode peut également obtenir différents effets de couleur d'arrière-plan et de couleur de bordure en utilisant deux couvertures triangulaires de couleurs différentes.

L'exemple simple ci-dessus d'utilisation de CSS pour obtenir l'effet triangle est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère que vous soutiendrez le site Web PHP chinois.

Pour des exemples plus détaillés de CSS réalisant des effets de triangle et des articles connexes, veuillez prêter attention au site Web PHP chinois !