階層化されたピラミッドを実現するための HTML+CSS の例

//html 
<div class="finetriangle">
  <div class="sanjiao">
   <!-- ピラミッド -->
    <div class="sj sj1"></div>
    <div class="sj sj2"></div>
    <div class="sj sj3"></div>
    <div class="sj sj4"></div>
    <div class="sj sj5"></div>
    <!-- 右側にデータを入力してください-->
    <div class="comarow descsj1">
      <span class="line"></span>
      <span class="value" id="hgwvalue">0</span>
    </div>
    <div class="comarow descsj2">
      <span class="line"></span>
      <span class="value" id="gwvalue">0</span>
    </div>
    <div class="comarow descsj3">
      <span class="line"></span>
      <span class="value" id="zgwvalue">0</span>
    </div>
    <div class="comarow descsj4">
      <span class="line"></span>
      <span class="value" id="zwvalue">0</span>
    </div>
    <div class="comarow descsj5">
      <span class="line"></span>
      <span class="value" id="dwvalue">0</span>
    </div>
    <!-- 中間テキスト -->
    <div class="describe describe1">非常に危険</div>
    <div class="describe describe2">高危険</div>
    <div class="describe describe3">中程度および高リスク</div>
    <div class="describe describe4">中程度&nbsp;&nbsp;&nbsp;&nbsp;重大</div>
    <div class="describe describe5">低&nbsp;&nbsp;&nbsp;&nbsp;重大</div>
  </div>
</div>

// css 
<スタイル>
    体 {
      幅: 100%;
      高さ: 100%;
    }
    
    .finetriangle {
      幅: 300ピクセル;
      高さ: 200px;
      背景: #082449;
    }

    .finetriangle .sanjiao {
      幅: 308ピクセル;
      マージン: 0 自動;
      位置: 相対的;
      変換: translateY(-50%);
      -webkit-transform: translateY(-50%);
      トップ: 46%
      右パディング: 30px;
    }

    .finetriangle .sj {
      マージン: 0 自動;
      高さ: 0;
      border-top: 0 透明;
      border-right: 15px 透明の実線;
      border-left: 15px 透明の実線;
      境界線の下の幅: 30px;
      境界線下部のスタイル: solid;
      ボックスのサイズ: コンテンツボックス;
      下マージン: 9px;
    }

    .finetriangle .sj1 {
      幅: 0;
      境界線下部の色: #ff0086;
      ボックスシャドウ: 0 10px 0 0 #cc007e;
    }

    .finetriangle .sj2 {
      幅: 40px;
      境界線下部の色: #ff3600;
      ボックスシャドウ: 0 10px 0 0 #ce1d00;
    }

    .finetriangle .sj3 {
      幅: 80ピクセル;
      境界線下部の色: #ff7f00;
      ボックスシャドウ: 0 10px 0 0 #d16800;
    }

    .finetriangle .sj4 {
      幅: 120ピクセル;
      境界線下部の色: #ffc94d;
      ボックスシャドウ: 0 10px 0 0 #e5912e;
    }

    .finetriangle .sj5 {
      幅: 160ピクセル;
      境界線下部の色: #67ce67;
      ボックスの影: 0 10px 0 0 #499c49;
    }

    .finetriangle .comarow {
      フォントサイズ: 12px;
      位置: 絶対;
    }

    .finetriangle .line {
      表示: インラインブロック;
      高さ: 1px;
      下部マージン: 5px;
    }

    .finetriangle .value {
      フォントサイズ: 16px;
    }

    .finetriangle .descsj1 {
      上: 5px;
      左マージン: 146px;
      色: #ff0086;
    }

    .finetriangle .descsj1 .line {
      幅: 100ピクセル;
      背景: #ff0086;
    }

    .finetriangle .descsj2 {
      上: 41px;
      左マージン: 166px;
      色: #ff3600;
    }

    .finetriangle .descsj2 .line {
      幅: 80ピクセル;
      背景: #ff3600;
    }

    .finetriangle .descsj3 {
      上: 81px;
      左マージン: 186px;
      色: #ff7f00;
    }

    .finetriangle .descsj3 .line {
      幅: 60ピクセル;
      背景: #ff7f00;
    }

    .finetriangle .descsj4 {
      上: 119px;
      左マージン: 206px;
      色: #ffc94d;
    }

    .finetriangle .descsj4 .line {
      幅: 40px;
      背景: #ffc94d;
    }

    .finetriangle .descsj5 {
      上: 159px;
      左マージン: 226px;
      色: #67ce67;
    }

    .finetriangle .descsj5 .line {
      幅: 20px;
      背景: #67ce67;
    }

    .finetriangle .describe {
      位置: 絶対;
      左マージン: 135px;
      フォントサイズ: 12px;
      色: #ffffff;
    }

    .finetriangle .describe1 {
      上: 10px;
    }

    .finetriangle .describe2 {
      上: 46px;
    }

    .finetriangle .describe3 {
      上: 86px;
    }

    .finetriangle .describe4 {
      上: 124px;
    }

    .finetriangle .describe5 {
      上: 163px;
    }
</スタイル>