报价气泡底部有三角形

I am having trouble figuring out how to make a CSS quote bubble with the triangle at the bottom left. I've found tons of CSS for speech bubbles, but either they do not expand with the text or the triangle is not on the bottom left (where I need it).

我不知道如何用左下角的三角形创建CSS报价气泡。我已经找到了大量用于语音气泡的CSS，但要么它们不随文本展开，要么三角形不在左下角(我需要它的地方)。

I've found a speech bubble that I really like, but it's triangle is on the left side because it was coded for a chat. If someone could explain to me how to adjust this code to make the bubble got to the bottom left, it would be greatly appreciated!

我发现了一个我非常喜欢的语音气泡，但是三角在左边，因为它是用来聊天的。如果有人能向我解释如何调整这段代码，使气泡到达左下角，我将不胜感激!

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

Here it is working in a jsfiddle: http://jsfiddle.net/24S5L/2/

在这里，它使用的是jsfiddle: http://jsfiddle.net/24S5L/2/

Thank you in advance for any help you can offer!

预先感谢您的任何帮助!

5 个解决方案

#1

Getting arrows at bottom is pretty easy, just use bottom instead of top and just some tweaks in rotate and skew

把箭头放在底部很容易，只需使用底部而不是顶部，并在旋转和倾斜中进行一些调整

CSS

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

演示

You can remove div.chat from HTML and CSS. There's no need for it.

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

#2

Do you mean the bottom of the left or the left of the bottom?

你是说底部的左边还是底部的左边?

If you mean the bottom of the left then simply replace:

如果你的意思是左边的底部，那么简单地替换:

top: 11px;

with

与

bottom: 11px;

like so...

像这样…

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

If not let me know and i'll have ago at positioning it on the bottom.
Let me know how you get on!

如果不让我知道，我早就把它放在底部了。让我知道你过得怎么样!

#3

JS FIDDLE - Is this what you wanted?

这就是你想要的吗?

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

#4

I think this does the trick. Here's a fork of THE FIDDLE too.

我认为这个方法很管用。这里还有一把小提琴的叉子。

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

#5

• Simple Floating CSS Quote Box with Rounded Corners, Triangle Tip, and Box Shadow :
  
• 简单的浮动CSS报价框，圆角，三角形提示，框阴影:

I ran into this similar problem and after much frustration, this is where I ended up.

我遇到了类似的问题，在经历了很多挫折之后，这就是我的结局。

See the fiddle here: http://jsfiddle.net/erikthedeveloper/CASJY/

请参见这里的小提琴:http://jsfiddle.net/erikthedeveloper/CASJY/。

Essentially, I have a .quote-box div that houses a p and two div's (.q-tip and .q-blocker).

本质上，我有一个.quote-box div包含一个p和两个div(。棉签和.q-blocker)。

I rotate the "tip" to create a triangle. Position it exactly center on the bottom of the quote box and "block" the top half of the tip with my .blocker div. This leaves a nice shadow all around the quote box and the tip.

我旋转“尖端”来创建一个三角形。将它准确地定位在报价框的底部，并用我的.blocker div“阻塞”技巧的上半部分。

HTML

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

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

I hope that helps!

我希望会有帮助!