CSS实现四个方向箭头的代码

2020-07-24 00:37:53

本篇文章给大家带来的内容是关于CSS实现四个方向箭头的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

<!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>

相关推荐:

怎么用css制作箭头?(不同方向箭头代码示例)

css实现任意大小、方向和角度的箭头代码