在底部引用三角形的泡沫

Question

我无法弄清楚如何使用左下角的三角形制作CSS引号气泡.我发现大量的CSS用于语音气泡,但要么它们不随文本扩展,要么三角形不在左下角(我需要它的地方).

我发现了一个我非常喜欢的语音泡泡,但它的左边是三角形,因为它是为聊天编码的.如果有人可以向我解释如何调整此代码以使气泡到达左下角,我们将不胜感激!

.bubble{
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    float: left;   
    margin: 5px 45px 5px 20px;    
}

.bubble::before {
    background-color: #F2F2F2;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
    box-shadow: -2px 2px 2px 0 rgba( 178, 178, 178, .4 );
    left: -9px; 
}

这里是一个jsfiddle工作:http://jsfiddle.net/24S5L/2/

提前感谢您提供的任何帮助!

Answer 1

获取箭头,底部是很容易的,只需要使用bottom而不是top,只是在一些调整rotate和skew

CSS

.chat {
    width: 400px;
}
.bubble {
    background-color: #F2F2F2;
    border-radius: 5px;
    box-shadow: 0 0 6px #B2B2B2;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;
    margin: 20px 10px;
}
.bubble::before {
    background-color: #F2F2F2;
    content:"\00a0";
    display: block;
    height: 16px;
    width: 16px;
    position: absolute;
    bottom: -7.5px;
    transform: rotate(47deg) skew(5deg);
    -moz-transform: rotate(47deg) skew(5deg);
    -ms-transform: rotate(47deg) skew(5deg);
    -o-transform: rotate(47deg) skew(5deg);
    -webkit-transform: rotate(47deg) skew(5deg);
    box-shadow: 2px 2px 2px 0 rgba(178, 178, 178, .4);
}

演示

您可以div.chat从HTML和CSS中删除.没有必要.