当前位置: 秋叶网络博客 网络技术 ◊ 通过CSS伪元素制作三角箭头教程

通过CSS伪元素制作三角箭头教程

作者:秋了秋 发表时间:2015年03月30日

网页制作很多时候要用到三角箭头,比如说我们的QQ聊天对话框,微信聊天对话框以及网页的留言评论框都会用到三角箭头,虽然不一定都是用css写的,有的还是用图片做的,这就是传统的箭头模式,用图片虽然兼容性较好,但还得用ps美工,每次变换都得用ps编辑图片相当麻烦,灵活性不高。所以还是用css比较方便快捷。

聊天模式窗口

现在就来教大家怎么弄这个三角箭头。举个例子:

表情 一句话,培养丰富的精神世界,才是最重要滴 表情

这块的代码是:

<div class="c-main" style="padding: 20px 15px; line-height: 25px; margin-top: -2px; margin-left: 32px;margin-right: 32px; border-radius: 3px; position: relative; background: #fbfdfb; border: 1px #eee solid; font-size: 15px;"><img src="http://www.mizuiren.com/wp-content/themes/QIUYE/images/smilies/icon_razz.gif" alt="表情" /> 一句话,培养丰富的精神世界,才是最重要滴 <img src="http://www.mizuiren.com/wp-content/themes/QIUYE/images/smilies/icon_lol.gif" alt="表情" /></div>

我们现在做的就是加三角箭头,这块的class是c-main,可以用c-main:before和c-main:after伪类做两个箭头,从而节省了div代码,相关的css代码如下:

.c-main:before{
content: '';
border-top: 9px solid transparent;/*方框上部分背景颜色为透明*/
border-bottom: 9px solid transparent;/*方框下部分背景为透明*/
border-right: 9px solid #eee;/*箭头背景颜色*/
position: absolute;/*绝对定位1*/
top: 25px;/*距离顶部位置偏移量2*/
left: -9px;/*距离左边位置偏移量3*/ /*123都是控制显示位置的*/
}
.c-main:after{
content: '';
border-top: 7px solid transparent;
border-bottom: 7px solid transparent;
border-right: 7px solid #fbfdfb;/*箭头背景颜色,覆盖前面的#eee颜色,使其颜色与整体颜色一致*/
position: absolute;
top: 27px;
left: -7px;
}

效果如下:

表情 一句话,培养丰富的精神世界,才是最重要滴 表情

因为border边框够粗,所以我把边框颜色理解为背景颜色,.c-main:before是一个箭头,.c-main:after是另外一个箭头,为什么要做两个箭头,是因为我们要有边框颜色的三角箭头,当第一个箭头(较大的)被第二个箭头(较小的)通过准确覆盖之后剩下没被覆盖的边缘就是合成三角箭头的边框了,其颜色就是较大的那个三角箭头的颜色,可调。而较小的那个三角箭头的颜色要设置成.c-main主体颜色,进行负值定位偏移时要把主体边框盖住,从而与主体合在一起。

这里事例的是指向左边的箭头,其它方向的同理可得,除了箭头指向的那个方向的border不用设置外,其它三边都要设置边框,位于箭头两边的边框颜色为透明(transparent),对边为主体边框颜色(较大的)/主体背景颜色(较小的)。还需要注意的是:定位类型一定不能少,主体c-main用相对定位position: relative;箭头.c-main:after和.c-main:before用绝对定位position: absolute;通过控制border的大小改变箭头整体大小,颜色等其它按需自行变化。

表情 一句话,培养丰富的精神世界,才是最重要滴 表情

 

最后,让你们见识下强大的边框,红色的是左边框颜色,绿色的为上边框颜色,蓝色的为右边框颜色,浅白色的为下边框颜色!

 

0
除非注明,文章均由 秋叶网络博客 发布,欢迎转载。
转载请注明本文地址:http://www.mizuiren.com/313.html
目录: 网络技术 | 标签: CSS三角箭头 | 10971次阅读