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

CSS triangle side with round on left? PART 2

CSS triangle side with round on left? PART 2

Problem

This is what it should look like: Align top http://www.kerrydeaf.com/arrow.png

span.trig_italic2{color:#000000; line-height:17px;font-size:12px;font-family:opensansitalic;     
width: 100px;
height: 36px;
background: #FFCC05;
position: relative;
-moz-border-radius:5px 0 0 5px;
-webkit-border-radius:5px 0 0 5px;
border-radius:5px 0 0 5px;
margin-right:50px;
padding:3px 4px 3px 4px;}
span.trig_italic2:before
{
content:"";
display:block;
position: absolute;
right: -22.5px;
top:0;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;
}

Here is a jsfiddle: http://jsfiddle.net/alma/zQKhb/2/

The problem is its hard to have rectangular box with corners to align the triangle as above?

It is for iphone app using Hybrid coding.

UPDATE: @andyb. Thank you for the update and this is what I see as below:

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

UPDATE: @andyb. It is now solved and a screen shot from iOS 6 stimulator. align top http://www.kerrydeaf.com/arrow3.png

UPDATE: Question: How do I move a yellow box down and touch the box a light blue box without leaving a gap?

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

UPDATE: Answer: It is now solved: added this margin-bottom:-8.5px on span.trig_italic2 CSS and it worked. (Image is not included)

Problem courtesy of: Irishgirl

Solution

The problem is in padding that increases box size unless you set box-sizing to border-box.

I would do this: http://jsfiddle.net/zQKhb/9/

Solution courtesy of: Andrey Kuzmin

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? PART 2

×

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

Get updates delivered right to your inbox!

Thank you for your subscription

×