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

我希望有所帮助！

在底部引用三角形的泡沫

5 个答案: