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!