Streaming live at 10am (PST)

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)

Hey!

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 https://css-tricks.com/the-shapes-of-css/ 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

RDaneel,

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

<style>

#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;
}

</style>

Found on this site: https://codepen.io/natchiketa/pen/rxqPZz

Thanks again for the help!

2 Likes