CSSで要素を斜めに2分割して境界線を透過

Result

mask-imageとlinear-gradientを使います。
素材次第ではちょっとアーティスティックな合成写真っぽいのが作れそうですね
※右下のRerunを押せば再読み込みして画像が変わります

css

:root {/*境界線を斜めに*/
  --direction: -45deg;
}

main {/*包括要素*/
  position: relative;
}

div {/*各要素基礎設定*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-repeat: none;
}

.background {
  background-image: url(https://source.unsplash.com/1600x900/?human);
}

.foreground {/*マスクレイヤーに指定し、グラデーション+透過処理を加える*/
  background-image: url(https://source.unsplash.com/1600x900/?night);
  mask-image: linear-gradient(var(--direction), black 40%, rgba(0, 0, 0, 0) 60%);
  mask-position: 50% 50%;
}

html

<main>
  <div class="background"></div>
  <div class="foreground"></div>
</main>

can i use

css-masksのブラウザ対応状況です
まだ実用には注意が必要そうですね

via

Animated CSS mask-image gradient