Search code examples
cssfonts

CSS for custom font icon with two backgrounds

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.

enter image description here

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. enter image description here

Solution

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