我有一个圆 Angular 矩形作为背景，想在上面放置另一个形状。叠加的形状应该掩盖下面的形状，最好在边缘没有任何奇怪的颜色。
我试图通过匹配形状尺寸来完成这项工作，但是 border-radius 属性无法与圆形边缘重叠的较暗背景完美对齐。
左边颜色不完美:
body {
margin: 100px;
}
#outer-shape {
height: 25px;
width: 100%;
border-radius: 12.5px;
background-color: #191932;
}
#inner-shape {
height: 25px;
width: 50%;
border-radius: 12.5px 0 0 12.5px;
background-color: #fa6400;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping Shapes</title>
</head>
<body>
<div id="outer-shape">
<div id="inner-shape"></div>
</div>
</body>
</html>有没有办法让我的子 div 保持矩形，然后剪裁父 div？重点是隐藏任何落在底层形状边界之外的东西。
是否可以将矩形剪裁到父形状？
body {
margin: 100px;
}
#outer-shape {
height: 25px;
width: 100%;
border-radius: 12.5px;
background-color: #191932;
}
#inner-shape {
height: 25px;
width: 50%;
opacity: 25%;
background-color:rgba(250, 100, 0, 0.75);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping Shapes</title>
</head>
<body>
<div id="outer-shape">
<div id="inner-shape"></div>
</div>
</body>
</html>编辑:
也许，我应该提到重点是将设计转换为进度条；这意味着我需要更新叠加形状(橙色)的宽度。应该可以设置从 0% 到 100% 的宽度，同时仍然显示两个形状之间的明显分离(无渐变过渡)。
除此之外，我试图回答我最初的问题:是否可以将矩形剪裁到父形状？
如果仔细观察，形状 1) 和形状 2) 在边缘处略有不同。第一个有一个底层较暗的背景颜色，可以通过观察稍微粗糙的边缘看到。第二张图片只是相同的形状，下面没有任何层。这确实很挑剔，但我无法避免在应用舍入的第一个示例中看到不完美的边缘。
有没有办法保持底层的较暗颜色并具有第二个示例中所示的平滑圆 Angular 边缘？
最佳答案
尝试在父元素中添加overflow: hidden
body {
margin: 100px;
}
#outer-shape {
height: 25px;
width: 100%;
border-radius: 12.5px;
background-color: #191932;
overflow: hidden;
}
#inner-shape {
height: 25px;
width: 50%;
background-color: #fa6400;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Overlapping Shapes</title>
</head>
<body>
<div id="outer-shape">
<div id="inner-shape"></div>
</div>
</body>
</html>关于css - 如何将 div 屏蔽到其父维度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62020973/