How can I remove a corner from a div?

Hello Webflow!

I’m trying to accomplish this background effect.

As you can seeing my Adobe XD mockup, there’s a white accent in the background of the footer, almost like a sheen effect. In terms of web-design, I’d picture this as an absolutely-positioned element, with the bottom-right corner removed or affected in some way using CSS that accomplishes the effect. Anyone know what I need to do? I’d prefer to stay away from images for sake of filesize. Thanks!

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


Try using an svg as a background image for the footer
(very small file size, because it’s code, not bitmap)
Give it custom width and height like 100% so it stretches the full width of the footer!

You could also create a div that sits absolutely positioned behind the footer’s content but in front of the footer wrapper. Then use custom css for it’s styling.
See for how you can then make it the desired shape :slight_smile:

1 Like

Thanks for the reply!

Using an SVG is a good idea. I’ve set up the div in Webflow to try and use custom code as you’ve suggested. I feel like this method would be easier to make changes to and keep the sheen pinned in the corners. However, I’m having a hard time making the shape responsive to the full width/height. Any thoughts on this?

try changing the border-top & border-right values to 100%. Fixed pixel values will never work for different breakpoint sizes and so forth


I actually just found a solution! Using a linear gradient, you can accomplish the effect.


#triangle {
  /* THIS IS THE MAGIC: using the directional keywords instead
     of an angle in the linear gradient property*/
  background-image: linear-gradient(to right bottom, white 0%, white 50%, transparent 50%);
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;


Found on this site:

Thanks again for the help!