Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

CSS triangle side with round on left?

CSS triangle side with round on left?

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.

align top http://www.kerrydeaf.com/arrow.png

#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/

Problem courtesy of: Irishgirl

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;
}
​
Solution courtesy of: Rene Koch

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

CSS triangle side with round on left?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×