HTML+CSS zum Erstellen eines geschichteten Pyramidenbeispiels

//html 
<div Klasse="finetriangle">
  <div Klasse="sanjiao">
   <!-- Pyramide -->
    <div Klasse="sj sj1"></div>
    <div Klasse="sj sj2"></div>
    <div Klasse="sj sj3"></div>
    <div Klasse="sj sj4"></div>
    <div Klasse="sj sj5"></div>
    <!-- Füllen Sie die Daten rechts aus-->
    <div Klasse="comarow descsj1">
      <span class="line"></span>
      <span class="Wert" id="hgwWert">0</span>
    </div>
    <div Klasse="comarow descsj2">
      <span class="line"></span>
      <span class="Wert" id="gwWert">0</span>
    </div>
    <div Klasse="comarow descsj3">
      <span class="line"></span>
      <span class="Wert" id="zgwWert">0</span>
    </div>
    <div Klasse="comarow descsj4">
      <span class="line"></span>
      <span class="Wert" id="zwWert">0</span>
    </div>
    <div Klasse="comarow descsj5">
      <span class="line"></span>
      <span class="Wert" id="dwWert">0</span>
    </div>
    <!-- Mittlerer Text -->
    <div class="describe describe1">Sehr gefährlich</div>
    <div class="describe describe2">Hohe&nbsp;&nbsp;&nbsp;&nbsp;Gefahr</div>
    <div class="describe describe3">Mittleres und hohes Risiko</div>
    <div class="describe describe4">Mittel&nbsp;&nbsp;&nbsp;&nbsp;Kritisch</div>
    <div class="describe describe5">Niedrig&nbsp;&nbsp;&nbsp;&nbsp;Kritisch</div>
  </div>
</div>

// CSS 
<Stil>
    Körper {
      Breite: 100 %;
      Höhe: 100%;
    }
    
    .feintriangle {
      Breite: 300px;
      Höhe: 200px;
      Hintergrund: #082449;
    }

    .finetriangle .sanjiao {
      Breite: 308px;
      Rand: 0 automatisch;
      Position: relativ;
      transformieren: verschiebeY(-50%);
      -webkit-transform: übersetzeY(-50%);
      oben: 46 %;
      Polsterung rechts: 30px;
    }

    .feintriangle .sj {
      Rand: 0 automatisch;
      Höhe: 0;
      Rahmen oben: 0 durchgehend transparent;
      Rahmen rechts: 15px durchgehend transparent;
      Rahmen links: 15px durchgehend transparent;
      Breite des unteren Rahmens: 30px;
      Rahmen-unten-Stil: durchgezogen;
      Box-Größe: Inhaltsbox;
      Rand unten: 9px;
    }

    .finetriangle .sj1 {
      Breite: 0;
      Farbe des unteren Rahmens: #ff0086;
      Kastenschatten: 0 10px 0 0 #cc007e;
    }

    .finetriangle .sj2 {
      Breite: 40px;
      Farbe des unteren Rahmens: #ff3600;
      Kastenschatten: 0 10px 0 0 #ce1d00;
    }

    .finetriangle .sj3 {
      Breite: 80px;
      Farbe des unteren Rahmens: #ff7f00;
      Kastenschatten: 0 10px 0 0 #d16800;
    }

    .finetriangle .sj4 {
      Breite: 120px;
      Farbe des unteren Rahmens: #ffc94d;
      Kastenschatten: 0 10px 0 0 #e5912e;
    }

    .finetriangle .sj5 {
      Breite: 160px;
      Farbe des unteren Rahmens: #67ce67;
      Boxschatten: 0 10px 0 0 #499c49;
    }

    .finetriangle .comarow {
      Schriftgröße: 12px;
      Position: absolut;
    }

    .feintriangle .line {
      Anzeige: Inline-Block;
      Höhe: 1px;
      Rand unten: 5px;
    }

    .feintriangle .wert {
      Schriftgröße: 16px;
    }

    .finetriangle .descsj1 {
      oben: 5px;
      Rand links: 146px;
      Farbe: #ff0086;
    }

    .finetriangle .descsj1 .line {
      Breite: 100px;
      Hintergrund: #ff0086;
    }

    .finetriangle .descsj2 {
      oben: 41px;
      Rand links: 166px;
      Farbe: #ff3600;
    }

    .finetriangle .descsj2 .line {
      Breite: 80px;
      Hintergrund: #ff3600;
    }

    .finetriangle .descsj3 {
      oben: 81px;
      Rand links: 186px;
      Farbe: #ff7f00;
    }

    .finetriangle .descsj3 .line {
      Breite: 60px;
      Hintergrund: #ff7f00;
    }

    .finetriangle .descsj4 {
      oben: 119px;
      Rand links: 206px;
      Farbe: #ffc94d;
    }

    .finetriangle .descsj4 .line {
      Breite: 40px;
      Hintergrund: #ffc94d;
    }

    .finetriangle .descsj5 {
      oben: 159px;
      Rand links: 226px;
      Farbe: #67ce67;
    }

    .finetriangle .descsj5 .line {
      Breite: 20px;
      Hintergrund: #67ce67;
    }

    .finetriangle .beschreiben {
      Position: absolut;
      Rand links: 135px;
      Schriftgröße: 12px;
      Farbe: #ffffff;
    }

    .finetriangle .describe1 {
      oben: 10px;
    }

    .finetriangle .describe2 {
      oben: 46px;
    }

    .finetriangle .describe3 {
      oben: 86px;
    }

    .finetriangle .describe4 {
      oben: 124px;
    }

    .finetriangle .describe5 {
      oben: 163px;
    }
</Stil>