CSS语音泡沫边界问题

Question

我正在调整用于创建语音气泡的CSS。 CSS源是http://forrst.com/posts/How_to_Make_a_Pure_CSS_Speech_Bubble_With_a_Drop-PU1。

我正在将气泡的背景更改为白色，并添加橙色边框。我的问题是我无法获得沿着泡泡底部三角形的边框来显示。三角形本身应为白色（#fff），边框为＃DD4814。

下面的屏幕截图和小提琴：http://jsfiddle.net/tuGHT/。有没有人对适当的CSS有所了解？

CSS

.bubble {
background-color: #fff;
border-radius: 7px;
border: 2px solid #DD4814;
box-shadow: inset 0 1px 1px hsla(0,0%,100%,.5),
            4px 4px 0 hsla(0,0%,0%,.1);
color: #333;
display: inline-block;
font-family: Ubuntu, sans-serif;
font: 16px/25px;
padding: 15px 25px;
position: absolute;
right: 20px;
}

.bubble:after, .bubble:before {
border-bottom: 25px solid transparent;
border-right: 25px solid #fff;
bottom: -25px;
content: '';
position: absolute;
right: 25px;
}
.bubble:before {
border-right: 25px solid hsla(0,0%,0%,.1);
bottom: -28px;
right: 22px;
}

HTML

<span class="bubble">Speech bubble right</span>

Answer 1

我通常这样做：DEMO

基本上，您需要在第一个后面放置另一个略大的:before或:after元素。

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
    z-index: 1;
}
.bubble:before {
    border-right: 27px solid #DD4814;
    border-bottom: 27px solid transparent;
    bottom: -29px;
    right: 23px;
    z-index: 0;
}

Answer 2

这是您的 css 代码

中的位置

.bubble:before:after {
top: 45px;
left: -14px;
bottom: auto;
border-width: 15px 21px 0 0;
border-color: transparent #ebea85;
}

它显示泡沫总是放在固定的地方