Coldarif's Blog

Css Bubble with Triangle at Bottom or side

Posted on: November 25, 2013

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!

.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:"0a0";
    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: http://jsfiddle.net/V3Bnn/1/

http://stackoverflow.com/questions/16868045/quote-bubble-with-triangle-at-bottom

my code:>>> http://codepen.io/anon/pen/tHzwf

http://codepen.io/coldarif
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Advertisements
%d bloggers like this: