用css制作空心箭头(上下左右各个方向均有)

平常在网页中,经常会有空心箭头,除了用图片外,可以用css来实现。基本思路是,用css绘制两个三角形,通过绝对定位让两三角形不完全重叠,例如制作向右的空心箭头,位于前面的三角形border颜色是需要的颜色,后面的三角形border颜色与包裹它们的div背景色一致,然后设置前面三角形的left值比后者的left多1px,这样就可容易生成空心箭头,但是在ie8以下浏览器中,需要设置父元素和子元素的优先级,否则制作的三角形无法显示。下面是使用css模拟空心箭头的实现代码,如果有错误或不完善的地方,欢迎指正。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css制作空心的上下左右的箭头</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .box{
            width:100px;
            height:500px;
            margin:0 auto;
            border:1px solid red;
            background:white;
        }
        .arrow-box{
            width:30px;
            height:30px;
            margin:20px auto;
            position:relative;
        }
        /*右箭头*/
        .right{
            width:20px;
            height:20px;
            position:absolute;
            left:0;
            top:0;
            border:1px solid blue;
        }
        .right-arrow1,.right-arrow2{
            width:0;
            height:0;
            display:block;
            position:absolute;
            left:0;
            top:0;
            border-top:10px transparent dashed;
            border-right:10px transparent dashed;
            border-bottom:10px transparent dashed;
            border-left:10px white solid;
            overflow:hidden;
        }
        .right-arrow1{
            left:1px;/*重要*/
            border-left:10px blue solid;
        }
        .right-arrow2{
            border-left:10px white solid;
        }
        /*左箭头*/
        .left{
            width:20px;
            height:20px;
            position:absolute;
            left:0;
            top:0;
            z-index: 2;/*兼容ie8-*/
            border:1px solid blue;
        }
        .left-arrow1,.left-arrow2{
            width:0;
            height:0;
            display:block;
            position:absolute;
            left:0;
            top:0;
            z-index:5;/*兼容ie8-*/
            border-top:10px transparent dashed;
            border-left:10px transparent dashed;
            border-bottom:10px transparent dashed;
            border-right:10px white solid;
            overflow:hidden;
        }
        .left-arrow1{
            border-right:10px blue solid;
        }
        .left-arrow2{
            left:1px;/*重要*/
            border-right:10px white solid;
        }
        /*上箭头*/
        .top{
            width:20px;
            height:20px;
            position:absolute;
            left:0;
            top:0;
            z-index: 2;/*兼容ie8-*/
            border:1px solid blue;
        }
        .top-arrow1,.top-arrow2{
            width:0;
            height:0;
            display:block;
            position:absolute;
            left:0;
            top:0;
            z-index: 5;/*兼容ie8-*/
            border-top:10px transparent dashed;
            border-left:10px transparent dashed;
            border-right:10px transparent dashed;
            border-bottom:10px white solid;
            overflow:hidden;
        }
        .top-arrow1{
            border-bottom:10px blue solid;
        }
        .top-arrow2{
            top:1px;/*重要*/
            border-bottom:10px white solid;
        }
        /*下箭头*/
        .bottom{
            width:20px;
            height:20px;
            position:absolute;
            left:0;
            top:0;
            z-index: 2;/*兼容ie8-*/
            border:1px solid blue;
        }
        .bottom-arrow1,.bottom-arrow2{
            width:0;
            height:0;
            display:block;
            position:absolute;
            left:0;
            top:0;
            z-index: 5;/*兼容ie8-*/
            border-bottom:10px transparent dashed;
            border-left:10px transparent dashed;
            border-right:10px transparent dashed;
            border-top:10px white solid;
            overflow:hidden;
        }
        .bottom-arrow1{
            top:1px;/*重要*/
            border-top:10px blue solid;
        }
        .bottom-arrow2{
            border-top:10px white solid;
        }
    </style>

<body>
<div class="box">
    <p> 右箭头</p>
    <div class="arrow-right arrow-box">
        <b class="right"><i class="right-arrow1"></i><i class="right-arrow2"></i></b>
    </div>
    <p> 左箭头</p>
    <div class="arrow-left arrow-box" >
        <b class="left"><i class="left-arrow1"></i><i class="left-arrow2"></i></b>
    </div>
    <p> 上箭头</p>
    <div class="arrow-top arrow-box" >
        <b class="top"><i class="top-arrow1"></i><i class="top-arrow2"></i></b>
    </div>
    <p> 下箭头</p>
    <div class="arrow-bottom arrow-box" >
        <b class="bottom"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
    </div>
</div>
</body>
</html>

效果如下:

经测试,Chrome,FF,以及IE6+均正常。

posted @ 2016-05-13 10:48 木西梧 阅读(...) 评论(...) 编辑 收藏