Box-Shadow over angled corner - html

Question

I have an element with a slanted bottom-right corner, over which I have to lay a box-shadow. Sometimes the slanted corner is covered up by a badge - my problem does not apply, if that is the case:
This is the (s)css part for the infobox and its corners (there are some more styles, but they're just text modifiers... The whole thing is on codepen: https://codepen.io/kerowan/pen/bqMOeB
.product-info-wrapper {
position: absolute;
top: 150px;
max-width: 100%;
padding-bottom: 10px;
width: 100%;
.product-info {
position: relative;
padding: 1rem * .5;
padding-right: 1rem * 2;
overflow: hidden;
box-shadow: 0 0 5px;
&:before,
&:after {
position: absolute;
content: "";
left: 0;
z-index: -1;
background-color: lighten(#000, 93.5%);
border-color: lighten(#000, 93.5%);
}
&:before {
top: 0;
right: 0;
bottom: 35px;
}
&:after {
top: auto;
right: -5px;
bottom: 0;
border-style: solid;
border-width: 35px 35px 0 0;
background-color: transparent;
border-right-color: transparent;
}
}
}
How can this be done (moving the shadow along the slanted corner)? Can it be done, if the slanted corners are generated the way I do it? I'm kind of dependant on those classes (I think at least) because of all the relative and absolute positioning, which I needed to place the corner badge.
EDIT: some HTML, if you need it:
<div class="swiper-slide">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="product-info-wrapper">
<div class="product-info">
<div class="row no-gutters">
<div class="col-8">
<strong class="text-uppercase">Amino Force</strong>
<span class="product-info-link">Kurzinfo</span>
</div>
<div class="col-4 text-right">
<span class="product-info-price">CHF 34.00</span>
</div>
</div>
</div>
<div class="product-badge-wrapper">
<div class="product-badge red">
<div class="product-badge-content">
new
</div>
</div>
</div>
</div>
</div>
This is just part of the whole HTML code which can be found on the codepen thingy. But I guessed, that this would be the only relevant part. If you need more, please tell me!
EDIT2
The contents of this infobox can be expanded. If I click on "Kurzinfo", it expands and shows more info. That's not on the codepen version, as I created it way before I added the expansion functionality.

Answer 1

It is normally impossible, because the slanted corner is a part of border of element that is not visible.
In image if the blue area changes to white you have a slanted corner black area, that is a part of border and in css we can not any think to change this.(change as you want).
You can cover the shadows by adding two little divs to the product div:
<div class="product-info-wrapper">
<div class="coverShadow c1"></div>
<div class="coverShadow c2"></div>
....
And CSS:
.coverShadow {
position: absolute;
z-index: 999;
background-color: white;
box-shadow: 0 0 14px white;
}
.coverShadow.c1 {
width: 10px;
height: 35px;
background-color: white;
bottom: 8px;
right: -10px;
}
.coverShadow.c2 {
width: 35px;
height: 10px;
bottom: 0px;
right: 0;
}
By changing the box shadow and width/height and right/bottom of covering divs it could be more smooth.
And thanks for the good idea for creating slanted corners.

Answer 2

As of 2022 you could get rid of the elements and styles .coverShadow, .coverShadow.c1 and coverShadow.c2 suggested by #Farzin's answer. Instead, for the .product-info element replace
box-shadow: 0 5px 5px
with
filter:drop-shadow(0 0 5px #333)
(blur amount and color might need to be adjusted).
The drop-shadow() will adapt to any shape, not just rectangles. It will also work in most modern browsers.