CSS for custom font icon with two backgrounds-CodePudding

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 ><i ></i></div>

Here is the results I am getting, and it doesn't scale as the font size changes.

CodePudding user response：

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>