Maison > Article > interface Web > Code CSS pour implémenter quatre flèches de direction

Code CSS pour implémenter quatre flèches de direction

不言original: 2018-09-11 17:12:303012parcourir

Le contenu de cet article concerne le code d'implémentation des flèches à quatre directions en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

<!DOCTYPE html >
<html>
    <head>
        <meta charset="utf-8"> 
        <title>自学教程(如约智惠.com)</title> 
        <style >
            i {
                border:solid black;
                border-width:0 3px 3px 0;
                display:inline-block;
                padding:3px;
            }
            
            .right {
                transform:rotate(-45deg);
                -webkit-transform:rotate(-45deg);
            }
            
            .left {
                transform:rotate(135deg);
                -webkit-transform:rotate(135deg);
            }
            
            .up {
                transform:rotate(-135deg);
                -webkit-transform:rotate(-135deg);
            }
            
            .down {
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
            }
            
        </style>
    </head>
    <body >
        <h2>CSS 方向</h2>
 
        <p>向右: <i class="right"></i></p>
        <p>向左: <i class="left"></i></p>
        <p>向上: <i class="up"></i></p>
        <p>向下: <i class="down"></i></p>
        
    </body>
</html>

Recommandations associées :

Comment faire des flèches avec du CSS ? (Exemples de code pour les flèches dans différentes directions)

Css pour implémenter des codes de flèches de n'importe quelle taille, direction et angle

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!

css

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment dessiner un hexagone régulier en CSS ? Deux façons de dessiner des hexagones réguliers avec CSS (exemples de code)Article suivant：Comment dessiner un hexagone régulier en CSS ? Deux façons de dessiner des hexagones réguliers avec CSS (exemples de code)

Code CSS pour implémenter quatre flèches de direction

Articles Liés