Clash Royale CLAN TAG#URR8PPP

box-shadow on angled border :after pseudoelement

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.

1 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>

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.