CODEWITHSUNDEEP
javascripthtmlcss
Irishgirl
Irishgirl

Reputation: 751

CSS triangle side with round on left? PART 2

This is what it should look like: align top
(source: kerrydeaf.com)

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
(source: kerrydeaf.com)

UPDATE: @andyb. It is now solved and a screen shot from iOS 6 stimulator. align top
(source: kerrydeaf.com)

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

align top
(source: kerrydeaf.com)

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

Upvotes: 1

Views: 296

Answers (2)

andyb
andyb

Reputation: 43823

Instead of creating a yellow triangle, how about creating a white triangle to chop off the end?

This does rely on making the <span> a bit wider, since the end will be taken up with the white triangle. So the span can be given display:inline-block in order for the width to take affect. I also had to give the height a smaller value and make the line-height equal to the font-size to keep the text vertically aligned in the middle of the block.

Edit: Since the background is a non-solid colour, an alternate approach would be to use a linear-gradient to chop off the end. The (slight) drawback to this approach is that the start of the chopping off point is hard-coded in the CSS and will not adapt to variable width content.

Updated demo (Webkit only)

result with Chrome 25 on Windows 7

span.trig_italic2 {
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:opensansitalic;     
    width:136px;
    display:inline-block;
    height: 12px;
    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;
    background:-webkit-linear-gradient(45deg, #FFCC05 100px, transparent 100px);
}

The original answer which works with solid colour backgrounds is left below.

Original demo (Webkit only)

span.trig_italic2 {
    color:#000000;
    line-height:12px;
    font-size:12px;
    font-family:opensansitalic;     
    width:136px;
    display:inline-block;
    height:12px;
    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:after {
    content:"";
    display:block;
    position: absolute;
    right:0;
    top:0;
    width:0;
    border:12px solid transparent;
    border-color:#fff #fff transparent transparent;
}

​

Upvotes: 4

Andrey Kuzmin
Andrey Kuzmin

Reputation: 4479

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/

Upvotes: 1

Related Questions