Search code examples
csspseudo-element

Having trouble with ::before border cut

I'm creating a banner for a webpage and the design has a sliced bottom right border, which is fine. I have created that using the ::before pseudo class with the following properties -

&::before {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    top: auto;
    left: auto;
    border-top: 0;
    border-right: 0 !important;
    border-bottom: 100px solid #fff;
    border-left: 100px solid var(--background-color);
    width: 0;
}

But, given the border has a background of #fff, it looks like this -

enter image description here

I would like the image to show through that corner cut.

I thought making the following change would work -

border-bottom: 100px solid transparent;

But it doesn't and I can't seem to figure out how to sort it.

Any help is appreciated!

Solution

  • maybe try clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

    Create a custom one here: https://bennettfeely.com/clippy/

    like in this example:

    .clip {
  background-color: red;
  width: 100px;
  height: 200px;
  clip-path: polygon(0% 100%, calc(100% - 50px) 100%, 100% calc(100% - 50px), 100% 0%, 0% 0%);
}
    <div class="clip"></div>

    replace 50px with the needed size ofc