HTML - CSS |我想在我的英雄图像中实现2个自定义div形状，但进展不顺利

<div id="hero-image">
  <!-- 在这里插入你的英雄图像 -->
</div>

#hero-image {
  position: relative;
  width: 400px; /* 设置英雄图像容器的宽度 */
  height: 300px; /* 设置英雄图像容器的高度 */
}

#hero-image::before {
  content: "";
  position: absolute;
  top: 50px; /* 设置自定义div1的位置 */
  left: 50px; /* 设置自定义div1的位置 */
  width: 100px; /* 设置自定义div1的宽度 */
  height: 100px; /* 设置自定义div1的高度 */
  background-color: red; /* 设置自定义div1的背景颜色 */
}

#hero-image::after {
  content: "";
  position: absolute;
  top: 150px; /* 设置自定义div2的位置 */
  left: 250px; /* 设置自定义div2的位置 */
  width: 150px; /* 设置自定义div2的宽度 */
  height: 50px; /* 设置自定义div2的高度 */
  background-color: blue; /* 设置自定义div2的背景颜色 */
}