Cet article partage un exemple d'utilisation de CSS3 pour créer un triangle. Les amis intéressés peuvent s'y référer.
Jetons d'abord un coup d'œil à l'effet. Avant CSS3, c'était complètement inimaginable. Mais aujourd'hui, alors que HTML5 et CSS3 sont si populaires, ce n'est pas un problème d'obtenir cet effet.

Regardez le code implémenté :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.arrow-up {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid orange;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid blue;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right: 10px solid silver;
}
</style>
</head>
<body>
<p class = "arrow-up" ></p>
<p class = "arrow-down" ></p>
<p class = "arrow-left" ></p>
<p class = "arrow-right" ></p>
</body>
</html>
|
Copier après la connexion
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!