Comment écrire une flèche en utilisant CSS3-tutoriel CSS-php.cn

Comment écrire une flèche en utilisant CSS3

藏色散人

Libérer： 2023-01-04 09:38:31

original

3996 Les gens l'ont consulté

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.

Comment écrire une flèche en utilisant CSS3

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>

Copier après la connexion

Rendu :

Comment écrire une flèche en utilisant CSS3