Skewed divs side by side with masked image?

[rnbutler87]

Hi, this is what I’m trying to achieve:

http://staging.sylatech.com/wp-content/uploads/2019/04/SYL_homepage-header_laptop_01.jpg (normal state, full viewport width and height)
http://staging.sylatech.com/wp-content/uploads/2019/04/SYL_homepage-header_laptop_02.jpg (example hover state)

This is where I’ve got to in figuring it out: http://staging.sylatech.com/home-alt/

The main problem I’m having is getting the image to stretch – whilst maintaining the same dimensional ratio – to fill the skewed mask. After I unskew the image, it won’t fill the skewed mask, as seen by the visible blue background-color

Can anyone help point me in the right direction for this?

Also – How would I only skew one edge of the mask for the left and right sections?

Any help on this would be massively appreciated!

Many thanks

[rnbutler87]

I’ve been thinking about cheating by simply setting the mask div to have a background image with a distorted image, skewed in the opposite direction so that when the div is skewed, it cancels out the baked in distort and displays it correctly…but this seems a bit hacky

BUT in the essence of just getting a preview for the client, this would work. So it would only leave me with the problem of only skewing the inside edge of the left and right sections…

—

PS this is the code-pen with the HTML and CSS:

https://codepen.io/rnbutler87/pen/jRRNXp

[Shikkediel]

Why not go with clip-path? Seems a lot easier to achieve what you’re after…

codepen.io/anon/pen/gyybpq

[rnbutler87]

Thank you so much! That’s great, I’d never heard of clip-path!

So after learning a bit about clip-paths this is where I’m at now: https://codepen.io/rnbutler87/pen/YMMXew

It’s so close! Now trying to get my head around the last bit about how to get all 3 divs to appear to sit next to each other along the skew lines – there will need to be some dynamic overlap of the divs – will this require setting the divs to position absolute?

EDIT – Actually, it would seem better if I could use 130% and -30% for the second and fourth vertices X values but it won’t take it, is this expected?

[Shikkediel]

I suppose you can’t clip what isn’t there (to be honest I’m just guessing)…

Link edited out.

[rnbutler87]

I’ve figured it out!

https://codepen.io/rnbutler87/pen/dLLGGK

I set the middle div to 50% width and set the margins to 0 auto. Then the first and last section div are set to position absolute and set to position left and right = 0, respectively, so they sit on top of the middle div and it just looks like the middle section has the skew effect.

Thank you for your help, the clip-path was the key, very much appreciated taking the time to help.

[Shikkediel]

Looking good. Cheers.

[Author]

Posts