Question

我有一个圆角矩形作为背景，想在顶部放置另一个形状。重叠的形状应遮盖下面的形状，最好在边缘没有任何怪异的颜色。

我试图通过匹配形状尺寸来完成这项工作，但是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）的边缘会略有不同。第一个具有潜在的深色背景色，可以通过观察稍微粗糙的边缘来看到。第二个图像只是相同的形状，下面没有任何层。这确实很挑剔，但是我无法避免在应用了舍入的第一个示例中看到不完美的边缘。

是否有一种方法可以使底层颜色保持较深颜色，并使边缘平滑，如第二个示例所示？

Answer 1

尝试将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>

Answer 2

为此使用多个背景，您可以使用{ "projectId": {{projectId}}, "userId": "1", "message": "Test Message", "answers": [{ "userId": "2", "message": "Answer Message" }] }

轻松控制其大小。

background-size

.outer-shape {
  height: 25px;
  margin: 10px;
  border-radius: 12.5px;
  background: 
    linear-gradient(#fa6400, #fa6400) left/50% 100% no-repeat, 
    #191932;
}

Answer 3

父级上的

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

body { 边距：100px; }

#outer-shape {
    height: 25px;
    width: 100%;
    border-radius: 12.5px;
  overflow:hidden;
  background: linear-gradient(90deg, #fa6400 50%, #191932 50%);
}

https://jsfiddle.net/fmvsk8g9/5/

并排 https://jsfiddle.net/8nzL17mp/1/

如何将div遮罩为其父尺寸？

3 个答案: