Reputation: 6273

Make one child overflow-visible out of overflow:hidden (or something else)

I want something that looks like this http://jsfiddle.net/mazlix/VBzau/3/

But I don't want to have to write the border-radius twice (in the div.left in the CSS). I mean, I can, but I just feel like it's wasteful and a sign that I've structured this wrong.

Please let me know if that seems the only way to properly achieve what I want.

Thanks!

Upvotes: 2

Answers (3)

Joonas

Reputation: 7303

1.

So.. I dont know if it's an option, but you could use background image in the outer container. This background would be the desired width and 1px height and hold 2 desired colors side by side. And it would be repeated vertically.

2.

This however is a css3 option: You could use horizontal gradient. Basically the same as the option above, just maybe a tad more flexible as it doesnt use image but css3 gradient as mentioned. http://jsfiddle.net/VBzau/13/

The gradient was made using http://www.colorzilla.com/gradient-editor/

3.

Then theres the good old masking. To basically use an image or images that are negatives of border radius and are the same color as the background where the box is placed.

Much like what is being used here as a fallback in the main content area with the sliding content http://www.apple.com/imac/

4. I got thinking about how you mentioned about the structure. So heres what i would recommend. http://jsfiddle.net/VBzau/14/

Basically i have put another container wrapping around the main container. Re-applied overflow: hidden; and taken away the radiuses from the left box. Also i moved the image inside the new outer-container.

Upvotes: 0