请选择 进入手机版 | 继续访问电脑版
游客您好
第三方账号登陆
鲸云网络 管理员
未知星球 | 未知职业
  • 关注0
  • 粉丝0
  • 帖子704
热议话题
zblog php mip主题开发官方指南
2020-07-08 0
由于百度对MIP的支持使得MIP网页大受欢迎,众多站长纷纷把网页改造成MIP。作为国内主
精选帖子

[HTML5] html+css实现分层金字塔的实例

[复制链接]
鲸云网络 发表于 2021-7-24 09:47:53 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题

本文主要介绍了html+css实现分层金字塔的实例,分享给大家,具体如下:

先上效果再看代码

202161165139145.png?202151165157.png

直接上代码

  1. // html
  2. <div class="finetriangle">
  3.   <div class="sanjiao">
  4.    <!-- 金字塔 -->
  5.     <div class="sj sj1"></div>
  6.     <div class="sj sj2"></div>
  7.     <div class="sj sj3"></div>
  8.     <div class="sj sj4"></div>
  9.     <div class="sj sj5"></div>
  10.     <!-- 右侧数据填入 -->
  11.     <div class="comarow descsj1">
  12.       <span class="line"></span>
  13.       <span class="value" id="hgwvalue">0</span>
  14.     </div>
  15.     <div class="comarow descsj2">
  16.       <span class="line"></span>
  17.       <span class="value" id="gwvalue">0</span>
  18.     </div>
  19.     <div class="comarow descsj3">
  20.       <span class="line"></span>
  21.       <span class="value" id="zgwvalue">0</span>
  22.     </div>
  23.     <div class="comarow descsj4">
  24.       <span class="line"></span>
  25.       <span class="value" id="zwvalue">0</span>
  26.     </div>
  27.     <div class="comarow descsj5">
  28.       <span class="line"></span>
  29.       <span class="value" id="dwvalue">0</span>
  30.     </div>
  31.     <!-- 中间文字 -->
  32.     <div class="describe describe1">很高危</div>
  33.     <div class="describe describe2">高    危</div>
  34.     <div class="describe describe3">中高危</div>
  35.     <div class="describe describe4">中    危</div>
  36.     <div class="describe describe5">低    危</div>
  37.   </div>
  38. </div>

  39. // css
  40. <style>
  41.     body {
  42.       width: 100%;
  43.       height: 100%;
  44.     }
  45.    
  46.     .finetriangle {
  47.       width: 300px;
  48.       height: 200px;
  49.       background: #082449;
  50.     }

  51.     .finetriangle .sanjiao {
  52.       width: 308px;
  53.       margin: 0 auto;
  54.       position: relative;
  55.       transform: translateY(-50%);
  56.       -webkit-transform: translateY(-50%);
  57.       top: 46%;
  58.       padding-right: 30px;
  59.     }

  60.     .finetriangle .sj {
  61.       margin: 0 auto;
  62.       height: 0;
  63.       border-top: 0 solid transparent;
  64.       border-right: 15px solid transparent;
  65.       border-left: 15px solid transparent;
  66.       border-bottom-width: 30px;
  67.       border-bottom-style: solid;
  68.       box-sizing: content-box;
  69.       margin-bottom: 9px;
  70.     }

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

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

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

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

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

  96.     .finetriangle .comarow {
  97.       font-size: 12px;
  98.       position: absolute;
  99.     }

  100.     .finetriangle .line {
  101.       display: inline-block;
  102.       height: 1px;
  103.       margin-bottom: 5px;
  104.     }

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

  108.     .finetriangle .descsj1 {
  109.       top: 5px;
  110.       margin-left: 146px;
  111.       color: #ff0086;
  112.     }

  113.     .finetriangle .descsj1 .line {
  114.       width: 100px;
  115.       background: #ff0086;
  116.     }

  117.     .finetriangle .descsj2 {
  118.       top: 41px;
  119.       margin-left: 166px;
  120.       color: #ff3600;
  121.     }

  122.     .finetriangle .descsj2 .line {
  123.       width: 80px;
  124.       background: #ff3600;
  125.     }

  126.     .finetriangle .descsj3 {
  127.       top: 81px;
  128.       margin-left: 186px;
  129.       color: #ff7f00;
  130.     }

  131.     .finetriangle .descsj3 .line {
  132.       width: 60px;
  133.       background: #ff7f00;
  134.     }

  135.     .finetriangle .descsj4 {
  136.       top: 119px;
  137.       margin-left: 206px;
  138.       color: #ffc94d;
  139.     }

  140.     .finetriangle .descsj4 .line {
  141.       width: 40px;
  142.       background: #ffc94d;
  143.     }

  144.     .finetriangle .descsj5 {
  145.       top: 159px;
  146.       margin-left: 226px;
  147.       color: #67ce67;
  148.     }

  149.     .finetriangle .descsj5 .line {
  150.       width: 20px;
  151.       background: #67ce67;
  152.     }

  153.     .finetriangle .describe {
  154.       position: absolute;
  155.       margin-left: 135px;
  156.       font-size: 12px;
  157.       color: #ffffff;
  158.     }

  159.     .finetriangle .describe1 {
  160.       top: 10px;
  161.     }

  162.     .finetriangle .describe2 {
  163.       top: 46px;
  164.     }

  165.     .finetriangle .describe3 {
  166.       top: 86px;
  167.     }

  168.     .finetriangle .describe4 {
  169.       top: 124px;
  170.     }

  171.     .finetriangle .describe5 {
  172.       top: 163px;
  173.     }
  174. </style>
复制代码

回复

使用道具 举报

懒得打字嘛,点击右侧快捷回复
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

推荐阅读

© 2001-2020 懒人建站 ( 辽ICP备18012687号-3 )

辽公网安备 21032102000036号