Comment dessiner un triangle avec du CSS pur

Comment dessiner un triangle avec CSS : 1. Définissez un élément label avec une largeur et une hauteur de 0 ; 2. Utilisez "border-direction: border width solid border color" pour définir la base du triangle ; 3. Les trois autres Il suffit de le définir avec une bordure transparente.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.

Principe de mise en œuvre du triangle :

• La largeur (largeur) est de 0 ; ) ) vaut 0 ;

• a un bord horizontal et vertical (haut, bas, gauche et droite) défini dans la direction de la bordure : longueur rouge uni, c'est la ligne droite en bas . Utilisez le sens de la bordure pour les autres côtés : longueur solide et transparente.

• Il existe des réglages pour deux côtés horizontaux et verticaux (haut, bas, gauche et droite). Si l'hypoténuse est sur le côté droit du triangle, définissez la ligne droite du haut. ou en bas, et la ligne diagonale à droite. Si l'hypoténuse se trouve sur le côté gauche du triangle, définissez la ligne droite supérieure ou inférieure et la ligne diagonale gauche.
  

1. Vers le haut

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2. Vers le bas

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

Apprentissage recommandé : tutoriel vidéo CSS

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!