how to style chat-bubble in iphone classic style using css only

Question

I trying to create a html page which looks like similar to Messages(thread view) just as in our android and iphone devices.

Here is what i have coded

Css styles:

Answer 1

Here is a simple pure css3 solution for creating chat bubble quite similar to iOS. I would go with this cleaner look... This is not using any image and its responsive for different device sizes. Here is the Working code. Came across this website and improvised css little bit to create pointer without image....

HTML

    Error dicunt theophrastus cu qui. Ad eos simul possit option, adipisci principes sed at. Detracto adolescens pro ea, duo no


    Lorem ipsum dolor sit amet, ea oblique constituam signiferumque eam. Pri adipisci maluisset te.

CSS

.commentArea {
font: 14px Arial;
padding: 0 10px;
margin-top: 20px;    
}

.bubbledLeft,.bubbledRight {
    margin-top: 20px;
    padding: 5px 9px;
    max-width: 50%;
    clear: both;
    position: relative;
}

.bubbledLeft{
    float: left;
    margin-right: auto;
    -webkit-border-radius: 8px 8px 8px 0px;
    -moz-border-radius: 8px 8px 8px 0px;
    -o-border-radius: 8px 8px 8px 0px;
    -ms-border-radius: 8px 8px 8px 0px;
    border-radius: 8px 8px 8px 0px;
    background-color: #65B045;
    color: #ffffff;
}

.bubbledLeft:before {
    border-bottom: 10px solid #65B045;
    border-left: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    left: -8px;
    content: "";
}

.bubbledRight{
    float: right;
    margin-left: auto;
    text-align: right;
    -webkit-border-radius: 8px 8px 0px 8px;
    -moz-border-radius: 8px 8px 0px 8px;
    -o-border-radius: 8px 8px 0px 8px;
    -ms-border-radius: 8px 8px 0px 8px;
    border-radius: 8px 8px 0px 8px;
    background-color: #07D;
    color: white;
}

.bubbledRight:before {
    border-bottom: 9px solid #07D;
    border-right: 9px solid rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    right: -8px;
    content: "";
}