box-shadow on angled border :after pseudoelement - html

Question

So, I've searched for a solution to this, and have had no luck. I need the box-shadow on the parent div to carry through the :after pseudo element.
Currently, the box shadow is still applying like a rectangle instead of following the edge of the border, which renders the angle at the end of the div. You can see what I'm talking about here:
https://codepen.io/thomasjost/pen/XBOjqm
Here's my HTML:
<div class="total-tag">
<h3 class="h-big-dollar-sign">$</h3>
<h1 class="total">13,550</h1>
</div>
SCSS:
.total-tag {
border-radius : 6px 0 0 6px;
background : #EBEDEE;
height : 68px;
width : 15em;
position : relative;
box-shadow: 0 1px 2px 0 rgb(0,0,0);
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
&:after {
content : '';
display : block;
position : absolute;
top : 0;
left : 15em;
border-style : solid;
border-color : #EBEDEE transparent transparent transparent;
border-width : 68px 34px 0 0;
box-shadow: 1px 1px 2px 0 rgb(0,0,0);
}
}
.total {
font-size: 38px;
font-weight: 300;
color: #64A31B;
line-height: 1em;
margin-top: 5px;
}
.h-big-dollar-sign {
position: relative;
left: inherit;
top: inherit;
margin-top: 5px;
margin-left: 17px;
font-size: 24px;
}
Any assistance would be greatly appreciated.

Answer 1

you could play with a gradient background to draw bg and simulate the shadow:
&:after {
content : '';
display : block;
position : absolute;
top : 0;
left : calc(15em - 2px);/* minus shadow's width */
bottom : 0;
width :36px;
background: linear-gradient(to bottom right, #EBEDEE 49%, #000 50%, transparent calc(50% + 2px) );/* draw bg and part of slanted shadow */
box-shadow:0px -2px 2px -3px;/* top shadow is to be shawn too, give it a try */
}
DEMO:
.total-tag {
border-radius: 6px 0 0 6px;
background: #EBEDEE;
height: 68px;
width: 15em;
position: relative;
box-shadow: 0 1px 2px 0 black;
display: flex;
justify-content: flex-start;
align-content: center;
align-items: center;
}
.total-tag:after {
content: '';
display: block;
position: absolute;
top: 0;
left: calc(15em - 2px);
bottom: 0;
width: 36px;
background: linear-gradient(to bottom right, #EBEDEE 49%, #000 50%, transparent calc(50% + 2px));
box-shadow: 0px -2px 2px -3px;
}
.total {
font-size: 38px;
font-weight: 300;
color: #64A31B;
line-height: 1em;
margin-top: 5px;
}
.h-big-dollar-sign {
position: relative;
left: inherit;
top: inherit;
margin-top: 5px;
margin-left: 17px;
font-size: 24px;
}
<div class="total-tag">
<h3 class="h-big-dollar-sign">$</h3>
<h1 class="total">13,550</h1>
</div>