Introduction à la façon de dessiner un triangle en utilisant CSS

J'ai vu des questions d'entretien demandant comment dessiner des triangles en utilisant CSS

Comme nous le savons tous, de nombreux graphiques peuvent être divisés en triangles, donc si vous savez dessiner des triangles, vous pouvez dessiner de nombreuses formes intéressantes

Le principe du dessin d'un triangle est d'ajuster la largeur, le style de trait et la couleur de la bordure dans quatre directions.

Si vous augmentez suffisamment la largeur et changez les couleurs dans différentes directions, vous constaterez que la bordure du modèle de boîte est constituée de quatre lignes en forme de trapèze.

À ce stade, si vous ajustez la hauteur et la largeur à l'intérieur du modèle de boîte à 0px, un triangle se formera.

border:100px solid transparent 　　//边框100px，实线，透明颜色，下面三行代码等同于此句
border-width:15px;　　　　　　　　//border-width代表所有方向的border
border-style:solid;
border-color:transparent；

Si vous comprenez le principe, vous devriez être capable d'écrire le code vous-même maintenant.

width: 0;
    height: 0;
    border-left: 50px solid transparent;　　　　//左边宽度50px，实线，透明颜色
    border-right: 50px solid transparent;　　　　//右边同上
    border-top: 100px solid red;　　　　　　　　//上边宽度100px，实线，红色

Le code ci-dessus peut générer un triangle descendant. Comme le montre l'image ci-dessous (j'ai remplacé la couleur à droite pour faciliter la compréhension)

À partir de ce rendu, nous pouvons voir que pour générer un triangle, nous avons besoin de trois bordures.

La hauteur des bordures gauche et droite déterminera la longueur de la hauteur du triangle.

La hauteur du triangle est déterminée par la largeur de la bordure elle-même

Alors comment générer un triangle pointant vers le bas à droite ou vers le bas à gauche, etc.?

Je crois que vous l'avez déjà vu à travers la photo ci-dessus.

Nous n’avons besoin que de deux frontières.

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

Ce code générera un triangle pointant vers le bas à gauche, avec une base et une hauteur de 100px.

Vous souvenez-vous de la largeur des bordures.

Il peut définir la largeur de quatre bordures avec une seule ligne de code.

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!