Quote Bubble with Triangle at Bottom

Question

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

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/

Thank you in advance for any help you can offer!

Answer 1

Getting arrows at bottom is pretty easy, just use bottom instead of top and just some tweaks in rotate and 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

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