Streaming live at 10am (PST)

Shadow on Button with Angled Corner

Hey, everyone! I’m early in a new project and have a question.

I’ve created a call button in the nav using a link block, and to go along with the client’s branding I’ve got this angled notch cut out of one corner. I achieved this by using a gradient for the background of the link block.

Only problem is, I’d like for this button to have a subtle shadow behind it. However, since the actual link block itself is still technically a full rectangle shape, the shadow doesn’t follow the angled corner. Could anyone help me figure out how to get the look I’m going for? Thanks so much!

See attached screenshots for reference:



Here is my site Read-Only: https://preview.webflow.com/preview/cmi19?utm_source=cmi19&preview=97c00273a0d0dd77dba611455112392c

Hey Chase,

You can use the border properties (button element) to style the top right border and set a radius. However, that will produce a curved corner and not the straight line ‘clipped’ corner effect you specified.

The other option is to create an image complete with clipped corner and box shadow and use the image as the background image of the button.

Hope that helps,
Keiran

Thanks for your reply @knk!

Yeah, I knew the radius property wouldn’t produce the effect I am going for. I’m starting to think the image-as-button option is the only way. This is unfortunate, but at least I can still use an .svg and have it look nice.