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


This is what it should look like: Align top

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;
padding:3px 4px 3px 4px;}
position: absolute;
right: -22.5px;
width: 0;
height: 0;
border: 11px solid transparent;
border-color: transparent transparent #FFCC05 #FFCC05;

Here is a jsfiddle:

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

UPDATE: @andyb. It is now solved and a screen shot from iOS 6 stimulator. align top

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

align top

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


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

I would do this:

Solution courtesy of: Andrey Kuzmin


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