Angled corner on elements by clip path

[felicityevans]

Hi,

I’ve followed this thread https://theme.co/apex/forum/t/apply-a-clip-path-to-a-button-element/58899 to create a clip path for one element on my page, but this clip path/angle changes depending on the size and proportions of the element. I want the angle to be consistent across each element no matter what the proportions are and irrespective of the element size changing due to responsive resizing. How can I achieve this?

Dev site is here: http://insyncdev.creativemindsdesign.com.au

Thanks!

[ruenel]

Hello Felicity,

Thanks for writing in!

The clip-path in the thread is using %. The result of this will vary depending on the browser size. If you want to have a fixed size, you will have to use px pixels. For more details about how you can implement clip-path, please check this out:

• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
• https://css-tricks.com/almanac/properties/c/clip/

Hope this helps.

[felicityevans]

Thanks for this info. Can I use a mixture of px and % in the clip-path?
If you specify the width of the polygon that will be a button, how will it automatically re-size according to the amount of text?

[ruenel]

Hello Felicity,

You might be able to mix % and px in the code. The problem is that with %, it will you a varying clip path. If you use px, it cannot detect the size of the text automatic. Your values must be pixel perfect related to the amount of text.

Hope this helps.