- This topic is empty.
April 29, 2019 at 2:05 am #287046
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 thanksApril 29, 2019 at 2:09 am #287047
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:April 29, 2019 at 2:56 am #287048
Why not go with
clip-path? Seems a lot easier to achieve what you’re after…April 29, 2019 at 3:54 am #287052
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?April 29, 2019 at 4:49 am #287056
I suppose you can’t clip what isn’t there (to be honest I’m just guessing)…
Link edited out.April 29, 2019 at 4:50 am #287057
I’ve figured it out!
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.April 29, 2019 at 5:01 am #287058
Looking good. Cheers.
- The forum ‘CSS’ is closed to new topics and replies.