Maison > Article > interface Web > Comment dessiner un triangle en utilisant CSS

Comment dessiner un triangle en utilisant CSS

王林avant: 2020-08-26 16:17:183167parcourir

Tout d'abord, jetons un coup d'œil aux rendus :

(Tutoriel vidéo recommandé : Tutoriel vidéo CSS)

Implémentation code :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /* css3绘制三角形 */
        .triangle{
            width: 0px;                           /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            height: 0px;
            border-bottom: 200px solid #00a3af;
            border-left: 200px solid transparent;    /*transparent 表示透明*/
            border-right: 200px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

Pour ceux qui ne comprennent toujours pas, vous pouvez lire ci-dessous

1 Définissez le div pour qu'il ait une certaine largeur et hauteur, et définissez des bordures sur les quatre côtés

.triangle{
	width: 50px;
	height: 50px;
	border-top: 200px solid #00a497;
	border-bottom: 200px solid #cc7eb1;
	border-left: 200px solid #165e83;
	border-right: 200px solid #c85179;
}

Le code ci-dessus définit le div pour qu'il ait une certaine largeur et hauteur Lors de la définition de bordures sur quatre côtés, l'effet est le suivant :

Comment dessiner un triangle en utilisant CSS

2. la largeur et la hauteur du div sur 0, et définissez la largeur de la bordure sur les quatre côtés sur 200px

.triangle{
   width: 0px;
   height: 0px;
   border-top: 200px solid #00a497;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

Le code ci-dessus définit la largeur du div Lorsque la hauteur est de 0 et que les quatre bordures sont définies sur des couleurs différentes, l'effet est la suivante :

Comment dessiner un triangle en utilisant CSS

(tutoriels associés recommandés :

Tutoriel CSS)

3 , alors la largeur et la hauteur du div sont toujours 0 , supprimez border-top

.triangle{
   width: 0px;
   height: 0px;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

Le code ci-dessus définit la largeur et la hauteur du div sur 0, et définit uniquement la bordure inférieure et les bordures gauche et droite, l'effet est le suivant :

Comment dessiner un triangle en utilisant CSS

4. Enfin, nous avons constaté qu'en définissant la couleur de la bordure inférieure et en rendant les bordures gauche et droite transparentes, nous pouvons obtenir le triangle

.triangle{
	width: 0px;
	height: 0px;
	border-bottom: 200px solid #cc7eb1;
    border-left: 200px solid transparent;
    border-right: 200px solid transparent;
}

L'effet final :

Comment dessiner un triangle en utilisant 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!

css border

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment implémenter le changement d'onglet en CSSArticle suivant：Comment implémenter le changement d'onglet en CSS

Articles Liés

Voir plus