CSS中的动态语音气泡 [英] Dynamic speech bubble in CSS

问题描述

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

I'm trying to make something like this:

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

I'd like to use pure CSS. Bootstrap v3 is already loaded.

我已经很接近了

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

但是结果并不是我想要的.

But the result is not quite what I'm looking for.

我已经四处搜寻并摆弄了些东西，但是没有找到适合我需求的优雅解决方案.

I've searched around and fiddled a bit, but have not found an elegant solution that fits my needs.

几年前，我本来可以使用表格和图像来完成此操作，但是肯定在2015年会有更好的方法吗?

Years ago I would have done this with tables and images, but surely there's a better way in 2015?

推荐答案

以下是2015年版本...

Here is a 2015 version...

.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)即可调整箭头的大小

You can adjust the size of the arrow simply by changing the border-width and margin-top values in the .bubble:after definition (currently set to 15px and -15px)

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

To make sure it retains it's border, you would also need to change these same 2 values in the .bubble:before definition (currently set to 16px and -16px)

这篇关于CSS中的动态语音气泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！