CSS triangle side with round on left? - html

Question

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/

Answer 1

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;
}
​

Answer 2

You were missing some crucial points in your triangle on the right. First of all, by default a :before element is display: inline, so to create the effect you were seeking you needed display: block instead.
Second, the right: 120px was moving it 120 pixels away from the right side of its original position. That is, it was being pushed to the left, out of view. Instead, you needed a negative right position (move to the right) of 100% (the width of the speech bubble). That way, it'd end up to the right of it.
Third, not sure what shape you were going for but it was almost everything but a triangle ;).
I went for this instead:
#talkbubble:before
{
content:" ";
display: block;
position: relative;
right: -100%;
width: 0;
height: 0;
border-left: 0 solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #FFCC05;
}
​The first part is for the positioning, the second part is creating the actual triangle (see http://css-tricks.com/snippets/css/css-triangle/).
In the jsfiddle I made the triangle blue so you can see exactly where it is. Change the border-right width to make the angle bigger. http://jsfiddle.net/USezL/31/