How can I remove a corner from a div?

Design help General
1

Hello Webflow!

I’m trying to accomplish this background effect.

footer
footer2666×992 66 KB

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)

2

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 The Shapes of CSS | CSS-Tricks - CSS-Tricks for how you can then make it the desired shape :slight_smile:

1 Like
3

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?

image
image1796×1084 44.9 KB

4

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

5

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