CSS triangle side with round on left?

css, html

Solution

i think this is what u are looking for http://css-tricks.com/snippets/css/css-triangle/

http://jsfiddle.net/zQKhb/

#talkbubble 
{ 
    width: 100px;
    height: 36px;
    background: #FFCC05;
    position: relative;
    -moz-border-radius:8px 0 0 8px;
    -webkit-border-radius:8px 0 0 8px;
    border-radius:8px 0 0 8px;
    margin-right:50px;

} 

#talkbubble:before
{
    content:"";
    display:block;
    position: absolute;
    right: -36px;
    top:0;
    width: 0;
    height: 0;
    border: 18px solid transparent;

    border-color: transparent transparent #FFCC05 #FFCC05;
}
​

Problem

I'm trying to create this as below and couldn't finish it. I can only manage to create a rounded corners on left but not slanted right. (source: kerrydeaf.com) ``` #talkbubble { width: 100px; height: 35px; background: #FFCC05; position: relative; -moz-border-radius:8px 0 0 8px; -webkit-border-radius:8px 0 0 8px; border-radius:8px 0 0 8px; margin-right:50px; } ``` Or here is http://jsfiddle.net/alma/USezL/23/

Original source