CSS 中的动态语音气泡

Question

我正在尝试做这样的事情：

我想使用纯 CSS。 Bootstrap v3 已加载。

我已经很接近类似的东西了

.bubble {
                   position:relative;
                   left: 15px;
                   padding: 10px;
                   background: #FFFFCC;
                   margin: 5px 5px;
                   max-width: 250px;
                   border: #FFCC00 solid 1px;
                }

.bubble:before {
                   position:absolute;
                   content: ""; 
                   top:15px;left:-10px;
                   border-width: 10px 15px 10px 0px;
                   border-color: transparent  #FFFFCC;
                   border-style: solid;
                 }

但结果并不是我想要的。

我四处寻找并摆弄了一下，但没有找到适合我需要的优雅解决方案。

几年前我会用表格和图片来做这件事，但在 2015 年肯定有更好的方法吗？

Answer 1

这是 2015 年的版本...

.bubble {
    position: relative;
    background: #FFFFCC;
    border: 1px solid #FFCC00;
    max-width:250px;
    padding:10px;
    font-family:arial;
    margin:0 auto;
    font-size:14px;
    border-radius:6px;

}
.bubble:after,
.bubble:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.bubble:after {
    border-color: rgba(255, 255, 204, 0);
    border-right-color: #FFFFCC;
    border-width: 15px;
    margin-top: -15px;
}
.bubble:before {
    border-color: rgba(255, 204, 0, 0);
    border-right-color: #FFCC00;
    border-width: 16px;
    margin-top: -16px;
}

查看实际效果：

http://jsfiddle.net/ajahb5p1/

注意：

您可以通过更改.bubble:after 定义中的border-width 和margin-top 值来调整箭头的大小（当前设置为15px 和-15px）

为确保它保留其边框，您还需要更改 .bubble:before 定义中的这两个相同的值（当前设置为 16px 和 -16px）