У меня есть прямоугольник с закругленными углами в качестве фона, и я хотел бы разместить сверху другую фигуру. Наложенная форма должна маскировать нижележащую форму, желательно без какой-либо странной окраски по краям. фон, на котором закругленные края перекрываются.
Неправильная окраска слева:
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) немного отличаются по краям. Первый имеет более темный фоновый цвет, который можно увидеть, взглянув на несколько более грубый край. Второе изображение просто той же формы, без каких-либо слоев под ним. Это действительно придирки, но я не могу не увидеть несовершенный край в первом примере, где применяется скругление.
Есть ли способ сохранить более темный цвет и получить гладкие закругленные края, как показано во втором пример?
