Css 如何将div屏蔽到其父维度？

我有一个圆形的矩形作为背景，并希望在顶部放置另一个形状。重叠形状应遮盖底层形状，最好边缘没有任何奇怪的颜色

我试图通过匹配形状尺寸来实现这一点，但是

边界半径

属性不能与圆角重叠的较暗背景完美对齐

左侧的不完美着色：

正文{
利润率：100像素；
}
#外形{
高度：25px；
宽度：100%；
边界半径：12.5px；
背景色：#191932；
}
#内部形状{
高度：25px；
宽度：50%；
边界半径：12.5px 0 12.5px；
背景色：#fa6400；
}

重叠形状

溢出：父项上隐藏的

将导致相同的不完美着色。 但您可以使用：

身体{ 利润率：100像素； }

并排

---

尝试向父元素添加

溢出：隐藏


正文{
利润率：100像素；
}
#外形{
高度：25px；
宽度：100%；
边界半径：12.5px；
背景色：#191932；
溢出：隐藏；
}
#内部形状{
高度：25px；
宽度：50%；
背景色：#fa6400；
}

重叠形状
为此使用多个背景，您可以使用
背景大小轻松控制大小


。外部形状{
高度：25px；
利润率：10px；
边界半径：12.5px；
背景：
线性梯度（#fa6400，#fa6400）左/50%100%无重复，
#191932;
}

使用
overflow:hidden
对家长？@Kenny不起作用，会产生同样的效果。你想达到什么目的？为什么你不用两种颜色来给父对象上色呢？仍然是一个渐变的工作，你可以很容易地调整颜色的宽度：你的问题已经结束了，所以我无法添加答案。我投票决定重新开放。一旦重新打开，我将发布我的asnwer；）我不明白。。。
正文
上的保证金如何对这些部门产生影响？保证金没有影响。这只是为了对齐元素。主要区别在于，在这个解决方案中没有嵌套元素。并排观看：对不起。我忘了提到我需要更新元素的宽度。只有当我希望分割位于圆角矩形的正中心时，您的解决方案才有效。例如，您的解决方案不适用于
背景：线性梯度（90度，#fa6400 40%，#191932 60%）。分色现在变成了渐变，这是我希望避免的。@MajesticPixel要避免渐变，两个数字必须相同。背景：线性梯度（90度，fa6400 30%，191932 30%）；在您的解决方案中仍然可以看到缺陷：(
#outer-shape {
    height: 25px;
    width: 100%;
    border-radius: 12.5px;
  overflow:hidden;
  background: linear-gradient(90deg, #fa6400 50%, #191932 50%);
}