画像を斜めにくり抜く

背景画像を表示させ、擬似要素を追加し
プロパティskew()で傾けます、そしてtranslateで移動させます。
そうすることで、斜めのボックスを作ることができます。

<div class="test"></div>

.test {
background-image: url(image/background.jpg);
overflow: hidden;
background-size: cover;
height: 300px;
}

.test:after {
content: “”;
display: block;
height: 100%;
background: #green;
transform: skew(0,170deg) translate(0,20%);
}

.test:before {
content: “”;
display: block;
height: 50%;
background: #green;
transform: skew(0,170deg) translate(0,-20%);
}