<div></div>
<div></div>
<div></div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --bg: linear-gradient(to bottom, #FF2655 0%, #FF4F26 100%), linear-gradient(to right, #fff, #fff);
  --mask: radial-gradient(circle at calc(100% - 10vw) 0, transparent, transparent 2vw,#000 2vw, #000 100%), radial-gradient(circle at calc(100% - 10vw) 100%, transparent, transparent 2vw,#000 2vw, #000 100%);
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #6c00af;
}

div {
  margin: 20px;
  min-width: calc((100vw - 100px) / 3);
  border-radius: 4px;
  height: 50vh;
  position: relative;
  
  &::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
    color: #fff;
    font-size: 2vh;
    text-shadow: 1px 1px 1px rgba(0,0,0,.35);
    white-space: nowrap;
    mix-blend-mode: difference;
  }
}

div:nth-child(1) {
  background-image:var(--bg);
  background-size: 10vw 100%, cover;
  background-repeat: no-repeat;
  background-position:right center;
  
  &::after {
    content: '带有背景的原元素'
  }
}

div:nth-child(2) {
  background: var(--mask);
  background-size: 100% 51%;
  background-repeat: no-repeat;
  background-position: 0 0, 0 100%;
  
  &::after {
    content:'遮罩图像'
  }
}

div:nth-child(3) {
  background-image:var(--bg);
  background-size: 10vw 100%, cover;
  background-repeat: no-repeat;
  background-position:right center;
  mask-image: var(--mask);
  mask-repeat: no-repeat;
  mask-composite: add;
  mask-composite: source-in;
  &::after {
    content: '合成遮罩元素的效果';
  }
}