制作特定形状的透明区域

Question

也许你知道如何制作如图所示的透明区域，我附上了什么？我尝试使用蒙版图像，但没有得到必要的结果。所以，在那里你可以看到 Vector 和它的透明，你可以在它的图中看到背景城市。你能帮我创建它吗。

const Wrapper = styled.div`
  background-image: url(${city});
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  width: 1200px;
  height: 400px;[enter image description here][1]
  margin: 20px;
  position: relative;
  /* &::before {
    content: "";
    background-image: url(${HeaderVector});
  } */
`;

const LinearGradient = styled.div`
  background: linear-gradient(
    116.44deg,
    rgba(114, 182, 59, 0.78) 40.41%,
    rgba(114, 182, 59, 0) 89.27%
  );
`;

const MaskImage = styled.div`
  display: inline-block;
  background-image: url(${HeaderVector});
  background-repeat: no-repeat;
  background-size: cover;
  width: 600px;
  height: 500px;
  &::after {
    content: "";
    mask-image: url(${HeaderVector});
    position: absolute;
    top: 0;
    right: 0;
    width: 600px;
    height: 500px;
  }
`;

const Container = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const TextContent = styled.div`
  margin: 98px 20px 30px 20px;
`;