CSS Trick: How To Get Trapezoidal Images For Your Website

Have you ever wondered how a certain effect is achieved on a website? You are not alone.

This is a question which every web designer wakes up and goes to sleep with. That’s our inborn curiosity.

Same happened to me yesterday.

A friend of mine, who designs visual brand identities, showed me the site of a prospect he recently contacted:

Their site was unfinished(and in Polish), so I couldn’t understand a thing. So I skipped reading the copy and jumped to analyzing the layout and how the whole page holds up graphically.

(Yes, I do that all the time, because just like you, I want to know what makes web sites look good or bad.)

What got me interested there was the shape of every section image. Untypical of the usual rectangularity of the web, they had trapezoidal images!

diagonal

And the slant was also responsive—it kept its angle and stayed crispy even in smaller sizes… hm, but how?

Continue reading “CSS Trick: How To Get Trapezoidal Images For Your Website”