如何创建相交且重叠区域属性一致的半透明块（云朵效果）

我想要创建两个相交的半透明块，要求重叠区域和单个块的颜色、透明度等属性完全一致，用来实现云朵效果。但目前写的CSS代码会让重叠区域颜色加深，以下是尝试的代码、实际效果截图和期望效果截图：

尝试的代码 #

CSS代码 #

.parent {
  position: relative;
  width: 200px;
  height: 200px;
}

.child {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.child-1 {
  background-color: rgba(255, 123, 0, 0.5);
  z-index: 2;
}

.child-2 {
  background-color: rgba(255, 123, 0, 0.5);
  top: 20px;
  left: 20px;
  z-index: 2;
}

.child-1,
.child-2 {
  isolation: isolate;
}

HTML代码 #

<div class="parent">
  <div class="child child-1"></div>
  <div class="child child-2"></div>
</div>

效果对比 #

实际效果 #

期望效果 #

内容的提问来源于stack exchange，提问作者rahunak