Streaming live at 10am (PST)

How to do a clip-path?


#1

Hi guys,

I have created the branding for a client and now I am building his website. I want to use some elements of the logo within the design. If you take a look, I used the skew transformation for the sections. The problem I am having is, if you see the testimonial section the edges where the photos are, look pixelated. So my questions are; if I use the clip-path style, will the line look smooth? and also; how can I apply that class to each element?

Thanks,

https://preview.webflow.com/preview/lifestyle-perfected?utm_source=lifestyle-perfected&preview=61e575c4919479bc9b9efb4a18acd579


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

I have seen this. You can try this resource: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

It’s best to create an SVG to apply these clip-paths to.

Hope that helps.


#3

It looks like the old quarkXpress (or Indesign) trick works here too: make the background of the .testimonial photo black. It tends to disappear more - not totally gone, but way more acceptable.