CSS3中实现气泡尖角的实现

发表于2017-08-28 11:35 | 次阅读 | 0条评论 | 作者：siru90

气泡尖角是现在比较主流的视觉设计，在HTML4+CSS2的时代，我们只能用添加dom节点或者背景图片等方式实现。作为前端来说，都希望自己的页面节点尽可能的少，页面文件尽量小，尽可能节约http请求（至少我是这么追求的）。但是又不能因为要节省dom节点去降低用户体验。在用户体验面前，我的追求只能屈服了。

CSS3的横空出世给我们带来福音，我们可以轻松实现气泡尖角，又不需要添加多余的dom节点。

下面对于几种常见的气泡尖角，给出一些实现方式。

一、无边框的气泡尖角

方案1，利用伪元素border实现

#live_list>li::before{
        context: "";
        position: absolute;
        left: 31px;
        top: 8px;
        height: 0;
        width: 0;
        border: 7px solid transparent;
        border-right-color: #fff;
}

方案2，利用将伪元素做为一个正方形旋转45°

#live_list>li::before{

context: "";

position: absolute;

left: 40px;

top: 10px;

height: 10px;

width: 10px;

background: #fff;

transform: rotate(45deg);

-o-transform: rotate(45deg);

-webkit-transform: rotate(45deg);

}

方案3，设置伪元素的content为

“”
#live_list>li::before{
context: "

";
        position: absolute;
        left: 38px;
        top: 0;
        color: #fff;
        font-size: 20px;
}

对于无边框的气泡尖角比较推荐方案3，代码比较简洁。方案2比较容易扩展为带边框的气泡尖角。

二、带边框的气泡尖角

.arrow_box.bottom::before{
        context: "";
        position: absolute;
        left: 50%;
        top: 100%;
        height: 8px;
        width: 8px;
        margin: -4px 0 0 -7px;
        border: 1px solid #babbbb;
        border-width: 0 1px 0 1px;
        background: #fff;
        transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
}
CSS3提供了伪元素，transform属性等新颖的技术，从而可以用来提升我们的页面质量。

上一篇：CSS3 Steps 逐步实现你的动画
下一篇：CSS3那些不为人知的高级属性