overflow - 边界半径、Z-index、溢出中断

Question

我有两个border-radius设置为 max 的 div 以使它们成为圆形。我在第一个圆圈中有一个不同的标题 div，background-color因此overflow:hidden看起来圆圈的顶部是不同的颜色。

第二个圈子我想在第一个圈子下面，基本上达到顶峰。问题是，一旦我设置position:relative（或其他任何东西），Chrome 和 Safari 的标题背景颜色就会溢出。

这应该是可行的。帮助？想法？

• 红色应该在绿色之后。
• 标题应该被溢出部分隐藏。

Answer 1

我想这有点'你在找什么。

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

还是我错过了什么？

Answer 2

只需尝试在大圆圈周围放置另一个 DIV 并在其上设置 position:relative 和 z-index 。