html+css 实现分层金字塔

最新推荐文章于 2022-03-25 17:25:15 发布

原创

最新推荐文章于 2022-03-25 17:25:15 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

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