html - 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;
}

它显示气泡始终放置在固定位置