My design consists of two circular divs with the border-radius property set to its max value. The first circle contains a header div with a unique background-color and overflow:hidden to create the illusion that the top portion of the circle has a different color.
The goal is to have the second circle positioned below the first one, peeking out slightly. However, when attempting to use position:relative or any other positioning attribute, overflow issues arise in Chrome and Safari browsers.
I believe there must be a solution to this problem. Does anyone have any ideas or suggestions?
- Desired: Red circle behind green circle.
- Header should partially hide due to overflow.