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

全屏阅读
  • 基本信息
  • 作者:
  • 作者已发布:924篇文章
  • 发布时间:2017年12月18日 1:01:30
  • 所属分类:CSS3, html
  • 阅读次数:3810次阅读
  • 标签:

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

代码:

<!DOCTYPE html>
<html>
<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>
    <p> 右箭头</p>
    <div class="arrow-right arrow-box">
        <b><i></i><i></i></b>
    </div>
    <p> 左箭头</p>
    <div class="arrow-left arrow-box" >
        <b><i></i><i></i></b>
    </div>
    <p> 上箭头</p>
    <div class="arrow-top arrow-box" >
        <b><i></i><i></i></b>
    </div>
    <p> 下箭头</p>
    <div class="arrow-bottom arrow-box" >
        <b><i></i><i></i></b>
    </div>
</div>
</body>
</html>

顶一下
(0)
100%
订阅 回复
踩一下
(0)
100%
» 郑重声明:本文由mpxq168发布,所有内容仅代表个人观点。版权归恒富网mpxq168共有,欢迎转载, 但未经作者同意必须保留此段声明,并给出文章连接,否则保留追究法律责任的权利! 如果本文侵犯了您的权益,请留言。

目前有 0 条留言 其中:访客:0 条, 博主:0 条

给我留言

您必须 [ 登录 ] 才能发表留言!