Streaming live at 10am (PST)

Notches on the corner of div

Hi!
I need help with creating notches on the corner of my div. The div is transparent with a border. Two corners of it should look like they are folded.
Any help will be much appreciated!

Hey,

you can create notches on corners of elements by using “border radius”, and setting each corner to its own style by using the “individual corners” setting :slight_smile:

Screenshot_15

Hey Robin,
what about not rounded but sharp notches?

Ah, sorry didn’t read your post through correctly.

Hmm, you would probably have to use a small div-block (with the same background color as the background of the element behind the main div), and “position: absolute” it to the corner of the main div to create an illusion of a sharp notch.

Folded corners are not supported in Webflow by default to my knowledge. If you are confident with CSS the effect isn’t too difficult to achieve. If you need every corner notched, I recommend using clip-path. If you only need one, or opposite corners notched, it can be achieved in the webflow editor.

It is possible to achieve this effect without writing any CSS:
image

How to achieve this in the webflow editor:

  1. Create a div to be the background and container
  2. Put your content inside the container
  3. Go to the container div, and give it a 45 degree linear gradient background.
  4. Place a color stop at 0%, 90%, and 100%.
  5. The color at 0% and 90% should be the intended background color, entirely opaque. The color stop at 100% should be the background color, completely transparent.
  6. Add a fourth color stop between 90% and 100% by clicking between the two stops. Make the color the same color, fully transparent.
  7. For the percent value, type in 90% and hit enter.
  8. You should now have a notched corner.

Here is an image example (only three color stops can be seen because the two at 90% are on top of each other):
image

How this works
Linear gradient backgrounds work by interpolating between color “stops”. Basically, given two color stops, the gradient will smoothly transition from one to the other. You can have as many stops as you would like, and you can tell them where on the element they should be.

With first three color stops in the process I outlined are telling the background:

"Hey, at 0% from the start, I want you to be color X, then, on your way to 90%, I want you to transition to color X (same color), and from there to 100%, transition to transparent.

This gives us a smooth color transition from 90% to 100%, which isn’t what we want. But, by adding in another stop at 90% we are then saying:

"From 0% to 90%, transition from color X to color X. Then from 90% to 90%, transition to transparent, and from 90% to 100%, stay transparent.

This makes the transition from color to transparency immediate, and effectively takes the corner off.

Sorry if this explanation isn’t great. Let me know if you need any clarification