html+css實(shí)現(xiàn)分層金字塔的實(shí)例

發(fā)布時間：2021-06-01 16:55:38 作者：迷路大叔

最近才自學(xué)了html和css，今天正好做個金字塔實(shí)例，可以清楚的看出圖標(biāo)數(shù)據(jù)，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

本文主要介紹了html+css實(shí)現(xiàn)分層金字塔的實(shí)例，分享給大家，具體如下：

先上效果再看代碼

直接上代碼

// 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>
    <!-- 右側(cè)數(shù)據(jù)填入 -->
    <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">高&nbsp;&nbsp;&nbsp;&nbsp;危</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 
<style>
    body {
      width: 100%;
      height: 100%;
    }
    
    .finetriangle {
      width: 300px;
      height: 200px;
      background: #082449;
    }

    .finetriangle .sanjiao {
      width: 308px;
      margin: 0 auto;
      position: relative;
      transform: translateY(-50%);
      -webkit-transform: translateY(-50%);
      top: 46%;
      padding-right: 30px;
    }

    .finetriangle .sj {
      margin: 0 auto;
      height: 0;
      border-top: 0 solid transparent;
      border-right: 15px solid transparent;
      border-left: 15px solid transparent;
      border-bottom-width: 30px;
      border-bottom-style: solid;
      box-sizing: content-box;
      margin-bottom: 9px;
    }

    .finetriangle .sj1 {
      width: 0;
      border-bottom-color: #ff0086;
      box-shadow: 0 10px 0 0 #cc007e;
    }

    .finetriangle .sj2 {
      width: 40px;
      border-bottom-color: #ff3600;
      box-shadow: 0 10px 0 0 #ce1d00;
    }

    .finetriangle .sj3 {
      width: 80px;
      border-bottom-color: #ff7f00;
      box-shadow: 0 10px 0 0 #d16800;
    }

    .finetriangle .sj4 {
      width: 120px;
      border-bottom-color: #ffc94d;
      box-shadow: 0 10px 0 0 #e5912e;
    }

    .finetriangle .sj5 {
      width: 160px;
      border-bottom-color: #67ce67;
      box-shadow: 0 10px 0 0 #499c49;
    }

    .finetriangle .comarow {
      font-size: 12px;
      position: absolute;
    }

    .finetriangle .line {
      display: inline-block;
      height: 1px;
      margin-bottom: 5px;
    }

    .finetriangle .value {
      font-size: 16px;
    }

    .finetriangle .descsj1 {
      top: 5px;
      margin-left: 146px;
      color: #ff0086;
    }

    .finetriangle .descsj1 .line {
      width: 100px;
      background: #ff0086;
    }

    .finetriangle .descsj2 {
      top: 41px;
      margin-left: 166px;
      color: #ff3600;
    }

    .finetriangle .descsj2 .line {
      width: 80px;
      background: #ff3600;
    }

    .finetriangle .descsj3 {
      top: 81px;
      margin-left: 186px;
      color: #ff7f00;
    }

    .finetriangle .descsj3 .line {
      width: 60px;
      background: #ff7f00;
    }

    .finetriangle .descsj4 {
      top: 119px;
      margin-left: 206px;
      color: #ffc94d;
    }

    .finetriangle .descsj4 .line {
      width: 40px;
      background: #ffc94d;
    }

    .finetriangle .descsj5 {
      top: 159px;
      margin-left: 226px;
      color: #67ce67;
    }

    .finetriangle .descsj5 .line {
      width: 20px;
      background: #67ce67;
    }

    .finetriangle .describe {
      position: absolute;
      margin-left: 135px;
      font-size: 12px;
      color: #ffffff;
    }

    .finetriangle .describe1 {
      top: 10px;
    }

    .finetriangle .describe2 {
      top: 46px;
    }

    .finetriangle .describe3 {
      top: 86px;
    }

    .finetriangle .describe4 {
      top: 124px;
    }

    .finetriangle .describe5 {
      top: 163px;
    }
</style>

到此這篇關(guān)于html+css實(shí)現(xiàn)分層金字塔的實(shí)例的文章就介紹到這了,更多相關(guān)html分層金字塔內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！