HTML – 在底部引用三角形的泡泡

概述我无法弄清楚如何使用左下角的三角形制作CSS引号气泡.我发现大量的CSS用于语音气泡,但要么它们不随文本扩展,要么三角形不在左下角(我需要它的地方). 我发现了一个我非常喜欢的语音泡泡,但它的左边是三角形,因为它是为聊天编码的.如果有人可以向我解释如何调整此代码以使气泡到达左下角,我们将不胜感激！ .bubble{ background-color: #F2F2F2; border 我无法弄清楚如何使用左下角的三角形制作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: "
.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:"a0";    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,.4);}
a0";    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,.4 );    left: -9px; }

这是在一个Jsfiddle：http://jsfiddle.net/24S5L/2/工作

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

解决方法 在底部获取箭头非常简单,只需使用底部而不是顶部,只需旋转和倾斜一些调整

CSS

Demo

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

总结

以上是内存溢出为你收集整理的HTML – 在底部引用三角形的泡泡全部内容，希望文章能够帮你解决HTML – 在底部引用三角形的泡泡所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。