纯CSS的箭头和提示框

 提示:转载请注明原文链接

 本文永久链接:http://360us.net/article/12.html

最近看到那种带箭头的提示框,忽然想看一下到底什么原理,也就去网上搜了一下,现在总结一下实现方法。
大概也就三种方法。

2014-10-09_104250.png
第一种方法就是纯粹的利用div的边框
图中A和B,C和D分别是一对实现向右和向左箭头的前后图。
看图A:

<div class="arrow-right-a"></div>

CSS:

.arrow-right-a {
    width: 0;
    height: 0;
    border-left: 20px solid #ccc;
    border-top: 10px solid #000;
    border-bottom: 10px solid #000;
    border-right: 10px solid #ccc;
}

把div的高和宽都设为0,然后设置这个div的四个边框,边框宽度设置大一点。
最终看效果(图A)。
我们可以看到四个边框都是三角形的,那么我们是不是可以让其中的任意三个边框透明,只显示一个三角形,是不是就可以得到四个方向的箭头了呢?
看图B:

<div class="arrow-right-b"></div>

CSS:

.arrow-right-b {
    width: 0;
    height: 0;
    border-left: 20px solid #ccc;
    border-top: 10px solid rgba(0 , 0, 0 , 0);
    border-bottom: 10px solid rgba(0 , 0, 0 , 0);
}

设置左边框颜色是灰色,上边框和下边框透明,就得到了图B的效果。
图C和图D是同样的原理。


第二种方法就是上面的方法加上css的伪类:before和:after

图E:

<div style="position:relative">
    <div class="tip">向左的箭头: 只有三个边:上、下、右。而 < | 总体来看,向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边:上、下、左。而 |> 总体来看,向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边,不能指定上边框 </div>
</div>

先设置好主体内容的css:

.tip {
    width: 200px;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 0 10px #ccc;
}

然后在tip前面插入内容:

.tip:before {
    content: "";
    border-right: 10px solid #ccc;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    left: -10px;
    top: 20px;
}

内容是空,其他的边框设置根据需要和第一种方法一致。
:before伪类插入的内容默认是显示在div内容的开头。
所以我们要用定位去重新固定到需要的位置。
看效果,问题来了,这个箭头和第一种方法实现的是一样的,里面有颜色,和我们的主体背景不一致,很不和谐。
好,下面就要用到:after伪类了。

.tip:after {
    content: "";
    border-right: 10px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    position: absolute;
    left: -9px;
    top : 20px;
}

这个的边框颜色设置成和主体背景颜色相一致,然后定位到before的内容除,覆盖掉before,空出1px不被覆盖即可。
效果如图E。


第三种方法就是要用到css3的旋转了

原理就是给一个div固定的宽和高,设置这个div的边框颜色和阴影,然后旋转这个div到适合的角度,
然后外面再包一层div,让它的子div超出它,超出的隐藏掉。
HTML:

<div class="tip-b">
    <div class="arrow-outer"><div class="arrow-left-a-a"></div></div>
    <div class="tip-content">
        向左的箭头: 只有三个边:上、下、右。而 < | 总体来看,向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边:上、下、左。而 |> 总体来看,向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边,不能指定上边框 
    </div>
</div>

arrow-outer就是箭头的父级,css是:

.arrow-outer {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 20px;
    left: -29px;
    overflow: hidden;
    display: inline-block;
}

关键是overflo:hidden。
然后是箭头arrow-left-a-a:

.arrow-left-a-a {
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    box-shadow: 0 0 5px #ccc;
    position: absolute;
    left: 20px;
    top: 3px;
    transform:rotate(45deg);
    background-color: #fff;
}

旋转45度,背景和主体背景一致。
旋转的目的就是让这个div互相垂直的两边形成指向,然后用定位让它超出他的父级div(.arrow-outer),超出的部分就是不需要的部分,自然会被隐藏。
最终就会形成箭头。

边框透明的话用rgba和transparent都是一样的,随便用哪个。

示例完整代码:

<!DOCTYPE html>
<html>
<head> 
    <meta charset="utf-8">
    <title>CSS 箭头Demo</title>
    <style type="text/css">
        body {
            padding-left: 20px;
        }
        /* rgba:
               R:红色值。正整数 | 百分数
               G:绿色值。正整数 | 百分数
               B:蓝色值。正整数| 百分数
               A:透明度。取值0~1之间
         */
        .arrow-right-a {
            width: 0;
            height: 0;
            border-left: 20px solid #ccc;
            border-top: 10px solid #000;
            border-bottom: 10px solid #000;
            border-right: 10px solid #ccc;
        }
        .arrow-right-b {
            width: 0;
            height: 0;
            border-left: 20px solid #ccc;
            border-top: 10px solid rgba(0 , 0, 0 , 0);
            border-bottom: 10px solid rgba(0 , 0, 0 , 0);
        }
        .arrow-left-a{
            width: 0;
            height: 0;
            border-right: 20px solid #ccc;
            border-top: 10px solid #000;
            border-bottom: 10px solid #000;
        }
        .arrow-left-b{
            width: 0;
            height: 0;
            border-right: 20px solid #ccc;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }

        .tip {
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 0 10px #ccc;
        }
        .tip:before {
            content: "";
            border-right: 10px solid #ccc;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            position: absolute;
            left: -10px;
            top: 20px;
        }
        .tip:after {
            content: "";
            border-right: 10px solid #fff;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            position: absolute;
            left: -9px;
            top : 20px;
        }
        .arrow-left-a-a {
            width: 20px;
            height: 20px;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ccc;
            position: absolute;
            left: 20px;
            top: 3px;
            transform:rotate(45deg);
            background-color: #fff;
        }
        .tip-b {
            position: relative;
        }
        .arrow-outer {
            width: 30px;
            height: 30px;
            position: absolute;
            top: 20px;
            left: -29px;
            overflow: hidden;
            display: inline-block;
        }
        .tip-content {
            width: 200px;
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 0 10px #ccc;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="arrow-right-a"></div>
    <br>
    <div class="arrow-right-b"></div>
    <br>
    <div class="arrow-left-a"></div>
    <br>
    <div class="arrow-left-b"></div>
    <br>
    <div style="position:relative">
        <div class="tip">向左的箭头: 只有三个边:上、下、右。而 < | 总体来看,向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边:上、下、左。而 |> 总体来看,向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边,不能指定上边框 </div>
    </div>
    <br>
    <div class="tip-b">
        <div class="arrow-outer"><div class="arrow-left-a-a"></div></div>
        <div class="tip-content">
            向左的箭头: 只有三个边:上、下、右。而 < | 总体来看,向左三角形的高=上+下边框的长度。 宽=右边框的长度 向右的箭头: 只有三个边:上、下、左。而 |> 总体来看,向右三角形的高=上+下边框的长度。 宽=左边框的长度 向上的箭头,类似于A,只有三个边,不能指定上边框 
        </div>
    </div>
</body>
</html>


 评论
昵称
邮箱
网址
最多500个字符