Border radius, Z-index, overflow breaking

Question

I have two divs with border-radius set to max to make them circles. I have a header div in the first circle with a different background-color and overflow:hidden so that it looks like the top portion of the circle is a different color.

The second circle I want to be underneath the first, basically peaking out. The problem is, as soon as I set position:relative (or anything else), the overflow on the header background color for Chrome and Safari.

This should be doable. Help? Thoughts?

How about placing another DIV round the large circle and setting the position:relative and z-index on that? — Billy Moat, Dec 11 '12 at 16:23
@BillyMoat Success! Thanks! For some reason, I always forget about throwing extra wrappers on things. — Elijah Murray, Dec 11 '12 at 16:34
See this question: http://stackoverflow.com/questions/10616668/how-to-hide-canvas-content-from-parent-rounded-corners-in-any-webkit-for-mac. — roelandvanbeek, Dec 11 '12 at 16:34
Cool, I'll add it as an answer for you to accept if that's cool... — Billy Moat, Dec 11 '12 at 16:37

score 0 · Answer 1 · answered Dec 11 '12 at 16:37

0

I guess this is kinda' what you're looking for.

http://codepen.io/AntonNiklasson/pen/kxwFB

Or am I missing something?

answered Dec 11 '12 at 16:37

AntonNiklasson

1,719
1
15
28

score 0 · Accepted Answer · answered Dec 11 '12 at 16:37

0

Just try placing another DIV round the large circle and setting the position:relative and z-index on that.

answered Dec 11 '12 at 16:37

Billy Moat

20,792
7
45
37

Success! Thanks a lot! If anyone else is doing this, make sure both the container element and the overlapped element are set with a position, or z-index doesn't work. – Elijah Murray Dec 11 '12 at 17:58

Border radius, Z-index, overflow breaking

2 Answers2