CSSスニペット：CSSで要素を斜めに2分割して境界線を透過 | かちびと.net

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/?huma