CSS制作气泡对话框

参考阮一峰的网络日志，原文链接http://www.ruanyifeng.com/blog/2010/04/css_speech_bubbles.html

HTML代码

<div class="bubble">Who are you?</div>

CSS代码设置　　

第一步，生成基本的方框。

.bubble{
            position:relative;
            padding:15px;
            margin:1em 0em 3em;
            width:300px;
            line-height: 1.2;
            text-align: center;
            color:#fff;
            background:#FFB6C1;
}

第二步，生成圆角。

.bubble{
           
            border-radius: 10px;//圆角
            -moz-border-radius:10px;
　　　　     -webkit-border-radius:10px;
        }

第三步，在容器后面添加一个空元素，并将长度和宽度都设为0。

.bubble:after{
            content: "\00a0";//content 属性与 :before 及 :after 伪元素配合使用，来插入生
                           成内容。设置文本或图像出现（浮动）在另一个元素中的什么地方

            width:0;
            height: 0;
        }

 第四步，指定这个空元素为块级元素，并且四个边框之中，只显示上方的边框，其他三个边框，都设为透明。因为该元素的大小为0，所以它的每一个边框，都是一个等腰三角形。

.bubble:after{
            display:block;
            border-style:solid;
            border-width:15px;
            border-color:#fff transparent transparent transparent;
          
        }

 第五步，指定空元素的定位方式为absolute。然后，以容器元素的左下角为基点，将空元素水平右移一定的距离（这里是50像素），再垂直下移两个边界的距离。（由于第五步将空元素的边界设为15像素，所以这里就是下移30像素。）

.bubble:after{
            position: absolute;
            z-index: -1;
            bottom:-30px;
            left:150px;
        }

　　

转载于:https://www.cnblogs.com/xy-milu/p/6626972.html