As I work on designing a banner for a webpage, I have added a sliced bottom right border using the ::before pseudo class. The code snippet I used includes:
&::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;
}
However, the issue I am facing is that due to the white background of the border, it does not allow the image to show through this corner cut:
https://i.sstatic.net/MpfR9.png
I attempted changing the code to make the border transparent like so:
border-bottom: 100px solid transparent;
Unfortunately, this fix did not work as expected and I am struggling to find a solution.
If anyone could offer some guidance, I would greatly appreciate it!