通过CSS3实现不使用图片创建气泡

来源：互联网发布：淘宝美术作品侵权编辑：程序博客网时间：2024/04/28 05:37

通过CSS3实现不使用图片创建气泡

Apr 14,2011 | 12:56 pm | in div+css

效果图如下：

原理：使用到CSS3的border-radius以及border-color，其实很强大，我只是实践了这两个标签的使用方式，不过IE不认；
html代码：<p class="comment">?</p>
第一步先实现圆形：

代码如下：
p.comment{
    font-size:38px;
    color:#fff;
    position: relative;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    background-color: #cf3737;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
}
第二步实现下面的尖角（使用before这个伪类）：

代码如下：
p.comment:before
{
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    left: 27px;
    top: 89px;
    border: 22px solid;
    border-color: #cf3737 #cf3737 transparent transparent;
}

from : Vipin-IT's Blog