Comment dessiner un triangle en CSS3 ? Introduction aux principes du dessin de triangles en CSS3-tutoriel CSS-php.cn

Comment dessiner un triangle en CSS3 ? Introduction aux principes du dessin de triangles en CSS3

不言

Libérer： 2018-09-25 10:46:31

original

9381 Les gens l'ont consulté

L'émergence du CSS a donné plus de styles aux pages Web, en particulier l'application du CSS3, qui a donné aux pages Web de plus beaux effets. Alors, quels effets peuvent être obtenus en CSS3 ? L'article d'aujourd'hui va vous apprendre comment dessiner un triangle en utilisant CSS3 ? Sans plus tarder, passons directement au texte.

Premier regard sur le principe du dessin de triangles en CSS3

Regardons d'abord un morceau de code :

Quand on définit la largeur et la hauteur d'un div à 100px , et définissez la largeur de ses quatre bordures à 100px, et définissez ses couleurs respectivement.

<!DOCTYPE html>
<html>
<body>
<style>
#triangle-up {
width: 100px;
height: 100px;
border: 100px solid transparent;
border-right: 100px solid red;
border-left: 100px solid blue;
border-top:100px solid yellow;
border-bottom:100px solid green;
}
</style>
<div id="triangle-up"></div>
</body>
</html>

Copier après la connexion

L'effet de ce code est le suivant :

Comment dessiner un triangle en CSS3 ? Introduction aux principes du dessin de triangles en CSS3

À ce moment, si la hauteur et la largeur de ce div sont définies sur 0, et d'autres choses restent inchangées, cela obtiendra l'effet graphique suivant :

Comment dessiner un triangle en CSS3 ? Introduction aux principes du dessin de triangles en CSS3

L'effet ci-dessus a-t-il plusieurs triangles Mais parce que nous ne voulons qu'un seul triangle, si nous changeons les couleurs ? des trois autres triangles Blanc, alors il n'en reste qu'un, alors comment rendre le fond de couleur des autres triangles blanc ? Il existe un tel attribut en CSS3, transparent, avec un fond transparent. De cette façon, nous pouvons atteindre notre objectif de laisser CSS3 dessiner un triangle.

Jetons ensuite un coup d'œil au code de dessin de triangle CSS3 spécifique :

<!DOCTYPE html>
<html>
<body>
<style>
#triangle{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 100px solid blue;
    }
</style>
<div id="triangle"></div>
</body>
</html>

Copier après la connexion

Le code de dessin de triangle CSS3 est le suivant :

Comment dessiner un triangle en CSS3 ? Introduction aux principes du dessin de triangles en CSS3

Parfois, il y aura un triangle avec une hauteur et une longueur de base limitées. Comment le dessiner en CSS3 ?

En regardant le code de dessin du triangle CSS3 ci-dessus, nous pouvons constater que la base du triangle est le double de la bordure et que la bordure inférieure est la hauteur du triangle. Nous pouvons donc modifier le bas et la hauteur en définissant la valeur border-bottom ou border.

Le code CSS3 pour dessiner un triangle avec une hauteur et une longueur de base limitées est le suivant :

Modifier la valeur de border-bottom :

<!DOCTYPE html>
<html>
<body>
<style>
#triangle{
    width: 0;
    height: 0;
    border: 100px solid transparent;
    border-bottom: 220px solid blue;
    }
</style>
<div id="triangle"></div>
</body>
</html>

Copier après la connexion

L'effet du triangle est le suivant :

Comment dessiner un triangle en CSS3 ? Introduction aux principes du dessin de triangles en CSS3

Modifier la valeur de la bordure :

<!DOCTYPE html>
<html>
<body>
<style>
#triangle{
    width: 0;
    height: 0;
    border: 60px solid transparent;
    border-bottom: 100px solid blue;
    }
</style>
<div id="triangle"></div>
</body>
</html>

Copier après la connexion

L'effet du triangle est le suivant :