V
V
Vyacheslav Borgomotov2018-02-07 17:11:44
css
Vyacheslav Borgomotov, 2018-02-07 17:11:44

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

Good afternoon everyone. Tell me how to make <div>this form:
5a7b08da62b27267652027.png
Thanks in advance!

Answer the question

In order to leave comments, you need to log in

3 answer(s)
A
Ankhena, 2018-02-07
@v-borgomotov

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;
}

K
Kovalsky, 2018-02-07
@lazalu68

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

X
xmoonlight, 2018-02-07
@xmoonlight

bennettfeely.com/clippy

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question