CODEWITHSUNDEEP
htmlcss
Irishgirl
Irishgirl

Reputation: 751

CSS triangle side with round on left?

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

Upvotes: 5

Views: 1551

Answers (2)

Stephan Muller
Stephan Muller

Reputation: 27600

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/

Upvotes: 2

Rene Koch
Rene Koch

Reputation: 1291

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

Upvotes: 3

Related Questions