CSS for custom font icon with two backgrounds - css

Question

I am working on a new font icon library, and trying to get a desired result that looks like below using only CSS. I can get the single color backgrounds working with css without any issues, but trying to find the best way to do the angled second background layer in a way that will keep ratio based on the font-size used.
Here is my current wip css.
.aw-#{$app_name}:before {
content: $app_code;
}
.aw-#{$app_name}-app:before {
content: $app_code;
position: relative;
border-top-left-radius: 1.25rem;
border-top-right-radius: 1.25rem;
border-bottom-right-radius: 1.25rem;
position: relative;
}
.bg-app-black {
position: relative !important;
}
.bg-app-black:before {
position: absolute;
content: "";
display:block;
width: 5rem;
height: 5rem;
border-radius: 1.25rem;
background-color: #222;
display:inline-block;
background: -0.1rem -0.1rem 0 1.5rem #000;
transform: rotate(-20deg);
}
Here is the html:
<div class="bg-app-black"><i class="aw-actions-app bg-development-app"></i></div>
Here is the results I am getting, and it doesn't scale as the font size changes.

Answer 1

To do it, you need to know that em unit is equal to the computed value of the font-size property of the element on which it is used. And, by default, descendants inherit font-size.
b {
position: relative;
display:inline-block;
font-size: 3rem;
}
b:before {
content: 'N';
position: relative; z-index:1;
display: inline-flex;
font-size: .8em;
width: 1.25em;
height: 1.25em;
border-radius: .3125em .3125em .3125em 0;
margin: .33em 0 0 .33em;
color: #fff;
background: #db2828;
justify-content: center;
align-items: center;
}
b:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 1em;
height: 1em;
border-radius: .25em;
background: #222;
transform: rotateZ(-20deg);
transform-origin: 0 100%;
}
<b></b>
<b style="font-size:5em"></b>
<b style="font-size:24px"></b>