ピラミッドチャートをCSSだけでつくってみよう!

CSSでピラミッドチャートを作る機会があったので作成してみました。
棒グラフや折れ線グラフなどはchart.jsなどで作成可能かと思いますが、
ピラミッドチャートだけは人気がない(?)のか、JS使わなくてもそもそもCSSでそれぐらい作れ!ということなのか
作れませんでした。
参考文献がめちゃくちゃあるわけでもないのでせっかくならばと!
今回つくってみたので、皆さんの参考になればいいなと思います。
(あ!レスポンシブには対応してませんので悪しからず…)
ではさっそくデモから!

See the Pen ピラミッドチャート by sayuri (@giraffeweb) on CodePen.light

HTMLソースです。
コメントでここからがピラミッドチャートと記載しているところが
純粋なピラミッドチャートのソースです。
横の表がいらない方はここだけコピペしてくださいませ!

<div class="flexBox serif">
<!-- ここからがピラミッドチャート -->
  <div class="pyramid">
  <div class="pyramid-row">
    <div class="level one">
      <p>レベルS</p>
      <span>超上級者</span> <em>10名</em> </div>
    <div class="pickupText"> <i class="fas fa-crown" aria-hidden="true"></i>
      <p>ここのみ合格</p>
    </div>
  </div>
  <div class="pyramid-row">
    <div class="level two">
      <p>レベルA</p>
      <span>上級者</span><em>100名</em> </div>
  </div>
  <div class="pyramid-row">
    <div class="level three">
      <p>レベルB</p>
      <span>中級者</span><em>800名</em> </div>
  </div>
</div>


<!-- ここまでがピラミッドチャート -->
  <div class="levelList">
    <div>
      <ul class="flexBox">
        <li>戦闘</li>
        <li>防御</li>
        <li>財力</li>
      </ul>
      <ul class="flexBox">
        <li><i class="fas fa-bullseye" aria-hidden="true"></i></li>
        <li><i class="fas fa-bullseye" aria-hidden="true"></i></li>
        <li><i class="fas fa-bullseye" aria-hidden="true"></i></li>
      </ul>
      <ul class="flexBox">
        <li><i class="far fa-circle" aria-hidden="true"></i></li>
        <li><i class="far fa-circle" aria-hidden="true"></i></li>
        <li><i class="far fa-circle" aria-hidden="true"></i></li>
      </ul>
      <ul class="flexBox">
        <li><i class="far fa-circle" aria-hidden="true"></i></li>
        <li><i class="far fa-triangle" aria-hidden="true"></i></li>
        <li><i class="far fa-triangle" aria-hidden="true"></i></li>
      </ul>
    </div>
  </div>
</div>

ピラミッドチャートだけのCSSです。

  div.pyramid {
      max-width: 400px;
      width: 50%;
      margin: 0 auto;
      text-align: center;
      box-sizing: inherit;
      .pyramid-row {
        display: block;
        position: relative;
        box-sizing: inherit;
        &:before {
            content: "";
            position: absolute;
            bottom: 0;
            right: -110%;
            width: 150%;
            height: 1px;
            background-color: #ddd;
        }
          .level {
              display: inline-block;
              vertical-align: middle;
              margin: 1px auto;
              color: #fff;
              box-sizing: inherit;
              p,span,em {
                  position: absolute;
                  left: 50%;
                  @include PropertySetPrefix(transform, translate(-50%, 0));
                  width: auto;
                  white-space: nowrap;
              }
              p {
                  font-size: 1.2em;
                  font-weight: 600;
                  top: -2%;
              }
              span {
                  font-size: 0.8em;
                  top: 45%;
              }
              em {
                  font-size: 1em;
                  top: 60%;
              }
          }
          .one {
              width: 0;
              height: 0;
              border-left: 90px solid #fff;
              border-right: 90px solid #fff;
              border-bottom: 150px solid $red;
              p {
                  top: 25%;
              }
              span {
                  top: 62%;
              }
              em {
                  top: 75%;
              }
          }
          .two {
              border-bottom: 85px solid lighten($black , 20);
              border-left: 50px solid transparent;
              border-right: 50px solid transparent;
              height: 0;
              width: 185px;
          }
          .three {
              border-bottom: 85px solid lighten($black , 10);
              border-left: 50px solid transparent;
              border-right: 50px solid transparent;
              height: 0;
              width:285px;
          }
      }
  }

全体のCSS(SCSS)です。
一応貼っておきます。

.flexBox {
    div.pyramid {
        max-width: 400px;
        width: 50%;
        margin: 0 auto;
        text-align: center;
        box-sizing: inherit;
        .pyramid-row {
          display: block;
          position: relative;
          box-sizing: inherit;
          &:before {
              content: "";
              position: absolute;
              bottom: 0;
              right: -110%;
              width: 150%;
              height: 1px;
              background-color: #ddd;
          }
            .level {
                display: inline-block;
                vertical-align: middle;
                margin: 1px auto;
                color: #fff;
                box-sizing: inherit;
                p,span,em {
                    position: absolute;
                    left: 50%;
                    @include PropertySetPrefix(transform, translate(-50%, 0));
                    width: auto;
                    white-space: nowrap;
                }
                p {
                    font-size: 1.2em;
                    font-weight: 600;
                    top: -2%;
                }
                span {
                    font-size: 0.8em;
                    top: 45%;
                }
                em {
                    font-size: 1em;
                    top: 60%;
                }
            }
            .one {
                width: 0;
                height: 0;
                border-left: 90px solid #fff;
                border-right: 90px solid #fff;
                border-bottom: 150px solid $red;
                p {
                    top: 25%;
                }
                span {
                    top: 62%;
                }
                em {
                    top: 75%;
                }
            }
            .two {
                border-bottom: 85px solid lighten($black , 20);
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                height: 0;
                width: 185px;
            }
            .three {
                border-bottom: 85px solid lighten($black , 10);
                border-left: 50px solid transparent;
                border-right: 50px solid transparent;
                height: 0;
                width:285px;
            }
            .pickupText {
                position: absolute;
                right: 5%;
                top: 25%;
                p {
                    font-weight: bold;
                    letter-spacing: .1em;
                    font-size: 0.8em;
                    color: $red;
                }
                i {
                    text-align: center;
                    color: #FBD200;
                    font-size: 2em;
                }
            }
        }
    }
    .levelList {
        width: 50%;
        ul {
            li {
                width: calc(100% / 3);
                text-align: center;
                margin-right: 0;
                padding: 1em 0;
                font-size: 14px;
                border-left: 1px dotted #ddd;
                position: relative;
                i {
                    display: block;
                    font-size: 2em;
                    position: relative;
                }
                .fa-bullseye {
                    color: $red;
                }
                .fa-triangle {
                    position: absolute;
                    margin: auto;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    width: 30px;
                    height: 30px;
                    &:before {
                      content: " ";
                      border-left: 18px solid transparent;
                      border-right: 18px solid transparent;
                      border-bottom: 30px solid #000;
                      display: block;
                      height: 0;
                      width: 0;
                      position: absolute;
                      top: 0;
                  }
      &:after {
                        content: " ";
                        border-left: 13px solid transparent;
                        border-right: 13px solid transparent;
                        border-bottom: 22px solid #fff;
                        display: block;
                        height: 0;
                        width: 0;
                        position: absolute;
                        left: 5px;
                        top: 5px;
                    }
                }
            }
            &:nth-child(n + 2) {
                li {
                    padding: 2.4em 0;
                    border-bottom: 0;
                }
            }
        }
    }
}