Recreate sharp corner div

Hello, guys!

I’m trying to recreate this sharp corner idea from here and it works till I add the border.

How could I have the sharp corner with the border too?

Thank you!

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



Try this thread in Webflow forum :slight_smile:

I could achieve the same result without custom code and only gradients, my main problem is the the stroke/border. I’ve saw that tutorial before I posted and it didn’t mention anything about the border.

I’m sorry if I may not understand the post enough, could you point exactly how to include the border too please? Thank you!

EDIT: Nevermind, I fixed it!

For anyone interested, I created a div block 30px x 30px (which will be the wrapper of the whole thing) - you can use any dimensions you want - with a gradient fill (that will contain the color of the border).

The gradient fill should look like this:
at 0% your preferred color with 100% transparency
at 90% your preferred color with 100% transparency
at 95% your preferred color with 0% transparency
at 100% your preferred color with 0% transparency
Lastly add a 225% degree angle to the gradient and you’re done with the border.

Then inside that border add a text block or a div block with the color of the background. Play with dimensions until everything fills in place exactly as the main div. For me 27px x 27px did the trick. Then use the same gradient values as before. That’s it.

For bigger divs you should probably adjust the gradient values like the 2 in between 0% and 100% should be set at 90% position one with 100% transparency, one with 0% transparency. See here: sharpcorner - Webflow