引用底部有三角形的气泡

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

Demo

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

Answer 2

你是指左下角还是左下角？

如果您指的是左下角，则只需替换：

top: 11px;

与

bottom: 11px;

像这样……

.bubble::before {
background-color: #F2F2F2;
content: "\00a0";
display: block;
height: 16px;
position: absolute;
bottom: 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; 
}

如果不让我知道，我会在之前将其定位在底部。
告诉我你过得怎么样！

Answer 3

JS FIDDLE - 这是你想要的吗？

.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;
    bottom: -5px;
    box-shadow: -2px 2px 2px 0 rgba(178, 178, 178, 0.4);
    content: " ";
    display: block;
    height: 13px;
    left: 11px;
    position: absolute;
    transform: rotate(-68deg) skew(-35deg);
    width: 15px;
}

Answer 4

我认为这可以解决问题。这也是THE FIDDLE 的一个分支。

.bubble{
    position: relative;
    display: inline-block;

    float: left;
    clear: left; /* don't think you'll need this... it's going to be absolute eventually I bet */

    background-color: white;
    padding: 1em;

    box-shadow: 0px 0px 2px 2px rgba(0,0,0,.3); /* adjust howevers */
    border-radius: .2em;

    /* for placement only */
    margin-bottom: 2em;
}


.bubble:before {
    content: " ";
    position: absolute;
    display: block;
    background-color: white;

    height: 14px; /* you can do fancier stuff, but then the tringle digs into the box further... */
    width: 14px;
    bottom: -7px; /* < or = to half the fake triangle's width? */
    left: 15px;

    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.3); /* adjust howevers */

    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

Answer 5

• 带有圆角、三角形提示和框阴影的简单浮动 CSS 引号框：
  

我遇到了类似的问题，经过很多挫折，这就是我最终的结果。

在此处查看小提琴：http://jsfiddle.net/erikthedeveloper/CASJY/

基本上，我有一个 .quote-box div，其中包含一个 p 和两个 div（.q-tip 和 .q-blocker）。

我旋转“尖端”来创建一个三角形。将其准确定位在报价框底部的中心，并用我的 .blocker div“阻止”提示的上半部分。这会在报价框和提示周围留下漂亮的阴影。

HTML

    <div class="quote-box">
        <p>
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, deleniti fugit quo tempora cupiditate in! Esse, consectetur adipisicing elit. Impedit, deleniti fugit quo tempora cupiditate in! Esse, excepturi..."
        </p>
        <!--[if gte IE 10]> -->
        <div class='q-tip q-rotate q-shadow'></div>
        <div class="q-blocker"></div>
        <!-- <![endif]-->
    </div>
</div>

CSS

.quote-box{
    position: relative;
    width:100%;
    height: 150px;
    background-color: #fff;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
}
.quote-box p{
    width: 90%;
    margin: 1.5em auto;
    font-size: 0.85em;
    font-style: italic;
    line-height: 1.75em;
    color: #636363;
    max-height: 200px;
    overflow: hidden;
    padding-top: 10px;
}
.quote-box-tip{
    font-size: 2em;
    position: relative;
    height: 1em;
    width: 0;
    left:45%;
    bottom:.5em;
}

.q-shadow, .quote-box{
    -moz-box-shadow:    1px 1px 2px 0 #000;
    -webkit-box-shadow: 2px 2px 2px 0 #000;
    box-shadow:         1px 1px 2px 0 #000;
}
.q-tip{
    height:20px;
    width:20px;
    background-color:#fff;
    position:absolute;
    bottom:-10px;
    left:0;
    right: 0;
    margin: auto;
    z-index:1;
}
.q-blocker{
    width:80%;
    height:20px;
    background-color:#fff;
    position:absolute;
    bottom:0;
    z-index:2;
    left: 0;
    right: 0;
    margin: auto;
}
.q-rotate{
    /* Not working in IE8 and lower */
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.5);
}

希望对你有帮助！