html+css 实现分层金字塔

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

迷路大叔

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

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： html+css 文章标签： html css

本文链接：https://blog.youkuaiyun.com/weixin_43132005/article/details/114577293

先上效果再看代码
在这里插入图片描述
直接上代码

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