Comment dessiner un triangle en utilisant la propriété CSS border

Utiliser des bordures pour dessiner des triangles est en fait une compétence étrange.

utilise une fonctionnalité de la bordure : lorsque la largeur et la hauteur d'un élément sont toutes deux égales à 0, définissez la largeur de la bordure (définissez la largeur d'au moins 2 bordures adjacentes), et la bordure soutiendra cet élément.

Lorsque la largeur des quatre bordures est définie en même temps, les quatre côtés convergent finalement vers un point au centre de l'élément.

Ainsi, lorsque nous définissons une bordure pour un élément avec une largeur et une hauteur, les quatre bordures sont connectées en diagonale plutôt qu'à angle droit, comme le montre l'image :

Donc la largeur et la hauteur ne sont pas définies, ce qui donne quatre Lorsque les bordures sont définies respectivement sur des couleurs différentes, vous pouvez obtenir 4 triangles de couleurs différentes et de directions différentes :

Lorsque vous souhaitez obtenir un triangle, vous ne pouvez pas définir une bordure distincte. Lorsque vous définissez une seule bordure, il s'agit simplement d'une ligne avec uniquement une largeur et aucune hauteur. , et ne peut pas être affiché sur la page ;

Par conséquent, vous devez toujours définir 4 bordures en même temps ou définir la largeur de deux bordures adjacentes, et ajouter une couleur à une seule des bordures :

Set 4 bords :

Ne définissez que deux bords adjacents :

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!