21
2014
02

打造纯CSS箭头,兼容所有主流浏览器

箭头再UI设计时会经常用到,小的如一个小箭头标示符,大的如一个弹出框都会用到箭头。用的最多的是截取一张各个方向的截图,然后再用css控制位置。这样稍显麻烦,如用纯CSS打造箭头会方便不少。今天研究bootstrap的时候看到了popover的箭头是用纯CSS打造的,然后就对此研究了一下,由于bootstrap的箭头不支持IE6,IE7,自己重修做了个能适应不同浏览器的纯CSS箭头,记录下来。


纯CSS箭头最终效果

popover-arrow.jpg


纯CSS箭头原理

设置箭头容器(div)的border为箭头大小(此处为10px),属性为dashed,且将border的颜色置为透明,然后设置一条边的颜色(例如:如果你需要向上的箭头,就设置border-bottom-color的颜色,此颜色为你箭头的颜色)。

.arrow-test{
            width: 50px;
            height: 0;
            font-size: 0;
            line-height: 0;
            border: 10px dashed transparent;
            border-bottom-color: #fff;
        }

上面代码得到的效果如下:

popover-arrow.jpg

可以从上图可以看到,如果我们将宽度设置为0,那么根据盒子模式的原理,我们可以得到一个向上的箭头,修改上面代码

width: 0;
...
border-bottom-style: solid;

你就得到一个向上的三角箭头。

纯CSS三角箭头的原理就是这样了,简单吧。至于为什么是dashed和solid? 后一个solid是为了显示一条实体边即显示border,上面用dashed是为了再IE6下将其他3条边透明化。


纯CSS箭头代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>css arrow</title>

    <style>
        body{
            background: #eee;
            padding: 0;
        }
        .wrap {
            margin: 20px;
        }

        .popover{
            position: relative;
            width: 200px;
            height: 50px;
            background: #fff;
            margin: 20px;
        }
        .popover.border{
            border: 1px solid #bbb;
        }

        .arrow,.arrow-border {
            position: absolute;
            z-index: 999;
            display: block;
            width: 0px;
            height: 0px;
            font-size: 0;
            line-height: 0;
            border: 10px dashed transparent;
        }
        .arrow-border{
            border-width: 11px;
        }
        .left .arrow,.left .arrow-border {
            left:-10px;
            top: 50%;
            margin-left: -10px;
            margin-top: -10px;
            border-right-style: solid;
            border-right-color: #fff;
        }
        .left .arrow-border{
            left:-11px;
            margin-left: -11px;
            margin-top: -11px;
            border-right-width: 11px;
            border-right-color: #999;
        }

        /* right arrow */
        .right .arrow,.right .arrow-border {
            right:-10px;
            top: 50%;
            margin-right: -10px;
            margin-top: -10px;
            border-left-style: solid;
            border-left-color: #fff;
        }
        .right .arrow-border{
            right:-11px;
            margin-right: -11px;
            margin-top: -11px;
            border-left-width: 11px;
            border-left-color: #999;
        }

        /* top arrow */
        .top .arrow,.top .arrow-border {
            top:-10px;
            left: 50%;
            margin-top: -10px;
            margin-left: -10px;
            border-bottom-style: solid;
            border-bottom-color: #fff;
        }
        .top .arrow-border{
            top:-11px;
            margin-top: -11px;
            margin-left: -11px;
            border-bottom-width: 11px;
            border-bottom-color: #999;
        }

        /* bottom arrow */
        .bottom .arrow,.bottom .arrow-border {
            bottom:-10px;
            left: 50%;
            margin-bottom: -10px;
            margin-left: -10px;
            border-top-style: solid;
            border-top-color: #fff;
        }
        .bottom .arrow-border{
            bottom:-11px;
            margin-bottom: -11px;
            margin-left: -11px;
            border-top-width: 11px;
            border-top-color: #999;
        }
    </style>

</head>

<body>
<div class="wrap">
    <!-- left arrow -->
    <div class="popover left">
        <div class="popover-content"></div>
        <div class="arrow"></div>
    </div>
    <div class="popover left border">
        <div class="popover-content"></div>
        <div class="arrow-border"></div>
        <div class="arrow"></div>
    </div>


    <!-- right arrow -->
    <div class="popover right">
        <div class="popover-content"></div>
        <div class="arrow"></div>
    </div>
    <div class="popover right border">
        <div class="popover-content"></div>
        <div class="arrow-border"></div>
        <div class="arrow"></div>
    </div>


    <!-- top arrow -->
    <div class="popover top">
        <div class="popover-content"></div>
        <div class="arrow"></div>
    </div>
    <div class="popover top border">
        <div class="popover-content"></div>
        <div class="arrow-border"></div>
        <div class="arrow"></div>
    </div>


    <!-- bottom arrow -->
    <div class="popover bottom">
        <div class="popover-content"></div>
        <div class="arrow"></div>
    </div>
    <div class="popover bottom border">
        <div class="popover-content"></div>
        <div class="arrow-border"></div>
        <div class="arrow"></div>
    </div>
</div>
</body>
</html>


« 上一篇下一篇 »

相关文章:

自适应网页设计中的字体单位选择  (2014-5-6 23:5:37)

CSS3浏览器支持参照表  (2013-2-15 18:51:40)

浅谈CSS hack  (2008-10-10 12:40:54)

区别IE6.IE7.FireFox的几种CSS HACK写法  (2008-10-10 10:40:45)

再写CSS控制未知高度DIV垂直居中  (2008-9-26 14:47:52)

IE的if条件注释Hack  (2008-9-26 11:16:41)

CSS三栏布局-固定自适应  (2008-9-22 10:32:28)

控制网页满屏显示最简单的方法  (2008-7-7 9:27:9)

CSS控制未知高度网页垂直居中  (2008-6-2 16:41:24)

CSS三栏布局10中样式下载  (2008-3-27 0:10:0)

评论列表:

1.活动会  2017/1/23 14:04:04 回复该留言
确认有帮助

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。