How to make a div with a picture inside in the shape of a trapezoid?

Question

css

Good afternoon everyone. Tell me how to make <div>this form:

Thanks in advance!

Answer 1

In one div
https://jsfiddle.net/Ankhena/4bzutwac/
adapt the angle and size to suit you Maybe
not the second background, but to ::after.

div {
    width: 80%;
    height: 300px;
    margin: 20px auto;
    background: linear-gradient(to right top, transparent 49.8%, #fff 50.2%) no-repeat right / 100px 100%, url(http://zastavok.net/main/priroda/1446112087.jpg) no-repeat top center / cover;
}

Answer 2

For example, with clip-path + shape-outside , something like this .

Answer 3

bennettfeely.com/clippy