HTML代码
<div class="bubble">Who are you?</div>
CSS代码设置
第一步,生成基本的方框。
.bubble{ position:relative; padding:15px; margin:1em 0em 3em; 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: " 0a0";//content 属性与 :before 及 :after 伪元素配合使用,来插入生 成内容。设置文本或图像出现(浮动)在另一个元素中的什么地方 0; height: 0; }
第四步,指定这个空元素为块级元素,并且四个边框之中,只显示上方的边框,其他三个边框,都设为透明。因为该元素的大小为0,所以它的每一个边框,都是一个等腰三角形。
.bubble:after{ display:block; border-style:solid; border-15px; border-color:#fff transparent transparent transparent; }
第五步,指定空元素的定位方式为absolute。然后,以容器元素的左下角为基点,将空元素水平右移一定的距离(这里是50像素),再垂直下移两个边界的距离。(由于第五步将空元素的边界设为15像素,所以这里就是下移30像素。)
.bubble:after{ position: absolute; z-index: -1; bottom:-30px; left:150px; }