Help Recreating this mountain clip path effect
Hi all, if you check this codepen you will see that 2nd image down the page has cool mountain clip-path CSS set to the top and bottom of the image.
I was trying to recreate this but was unsuccesful. Main issue is that my clip path (or custom SVG) stretched when resizing viewport, while in the codepen you can see that mountains retain their aspect ratio, never stretching or squishing regardless of viewport size.
What I missing here, how can I recreate this effect? When applying identical CSS to my markup the mountains always squish down 🙁
https://codepen.io/BillyHill/pen/xBvKpE
https://codepen.io/BillyHill/pen/xBvKpE
2 Replies
Where is your code? Without seeing that it is impossible to know what you are missing.
because its applied to the image (which maintains apect-ratio by itself) and using percentages for the clippath
so if it is strecthing, then probably your image is not maintaining the aspect-ratio, or you are applying it to something that doesnt have an aspect-ratio at all