Maison > Article > interface Web > Comment écrire une flèche en utilisant CSS3
Comment écrire des flèches en utilisant CSS3 : créez d'abord un exemple de fichier frontal ; puis utilisez l'attribut transform en CSS3 pour implémenter un petit carré sans remplissage d'arrière-plan. Enfin, vous pouvez obtenir l'effet de flèche en définissant son ; bordure et retournement.
L'environnement d'exploitation de ce tutoriel : ordinateur Dell G3, système Windows 7, version HTML5&&CSS3.
Recommandé : "Tutoriel vidéo CSS"
Comment écrire des flèches en utilisant CSS3 ?
Vous pouvez utiliser l'attribut transform en CSS3 pour d'abord implémenter un petit carré sans remplissage d'arrière-plan, définir sa bordure et le retourner pour réaliser la flèche.
Regardons l'exemple ci-dessous :
<style>
.left{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(-135deg);
}
.right{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(45deg);
}
.top{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(-45deg);
}
.bottom{
width: 7px;
height: 7px;
border-top: 2px solid #ff0000;
border-right: 2px solid #ff0000;
transform: rotate(135deg);
}
</style>
</head>
<body>
<div class="left"></div>
<hr>
<div class="right"></div>
<hr>
<div class="top"></div>
<hr>
<div class="bottom"></div>
</body>Rendu :
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!