css制作上下左右的箭头

最新推荐文章于 2021-06-20 02:02:39 发布

weixin_30416871

最新推荐文章于 2021-06-20 02:02:39 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/wuheng1991/p/5102021.html

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
     .arrow {
                width:0; 
                height:0; 
                position: absolute;
                top:0;
                left:0;
                display: inline-block;
            }
            .arrow-down {

                border-left:5px solid transparent;
                border-right:5px solid transparent;
                border-top:5px solid #f63;

            }
            .arrow-up {
                border-bottom:5px solid #f63;
                border-left:5px solid transparent;
                border-right:5px solid transparent;
                top:50px;
            }
            .arrow-left {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-right:5px solid #f63; 
                top:100px;
            }
            .arrow-right {
                border-top:5px solid transparent;
                border-bottom:5px solid transparent; 
                border-left:5px solid #288; 
                top:150px;
            }
    </style>
</head>
<body>
     <div style="position: relative">
        <span class="arrow arrow-down"></span>
        <span class="arrow arrow-up"></span>
        <span class="arrow arrow-left"></span>
        <span class="arrow arrow-right"></span>
     </div>
</body>
</html>

补充：css生成三角形：http://www.sucaihuo.com/tools/triangle

转载于:https://www.cnblogs.com/wuheng1991/p/5102021.html

weixin_30416871

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css制作上下左右的箭头

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .arrow { width:0...
复制链接

扫一扫