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


Posted in HTML / CSS onJune 02, 2021

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

先上效果再看代码

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

到此这篇关于html+css实现分层金字塔的实例的文章就介绍到这了,更多相关html分层金字塔内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木! 

 
HTML / CSS 相关文章推荐
CSS3制作苹果风格键盘特效
Feb 26 HTML / CSS
使用CSS3中的calc()属性来以算式表达尺寸数值
Jun 06 HTML / CSS
CSS3制作缩略图的详细过程
Jul 08 HTML / CSS
html5新特性与用法大全
Sep 13 HTML / CSS
html5教程实现Photoshop渐变色效果
Dec 04 HTML / CSS
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
Oct 20 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
HTML5自定义属性的问题分析
Aug 16 HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
HTML5播放实现rtmp流直播
Jun 16 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
html+css实现赛博朋克风格按钮
HTML+CSS制作心跳特效的实现
浅谈CSS不规则边框的生成方案
May 25 #HTML / CSS
详解CSS故障艺术
HTML中的表单Form实现居中效果
May 25 #HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
CSS filter 有什么神奇用途
You might like
PHP的文件操作与算法实现的面试题示例
2015/08/10 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
thinkPHP多域名情况下使用memcache方式共享session数据的实现方法
2016/07/21 PHP
PHP使用SWOOLE扩展实现定时同步 MySQL 数据
2017/04/09 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
TP - 比RBAC更好的权限认证方式(Auth类认证)
2021/03/09 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
在JS中最常看到切最容易迷惑的语法(转)
2010/10/29 Javascript
JavaScript Date对象 日期获取函数
2010/12/19 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
分享自己用JS做的扫雷小游戏
2016/02/17 Javascript
JS控制层作圆周运动的方法
2016/06/20 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
layui使用label标签的方法
2019/09/14 Javascript
jQuery-App输入框实现实时搜索
2020/11/19 jQuery
Python实现八大排序算法
2016/08/13 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
python实现简单的购物程序代码实例
2020/03/03 Python
TensorFlow中如何确定张量的形状实例
2020/06/23 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
Notino芬兰:购买香水和化妆品
2019/04/15 全球购物
高中军训的心得体会
2014/09/01 职场文书
个人查摆问题及整改措施
2014/10/16 职场文书
参观邀请函范文
2015/02/02 职场文书
2015年南京大屠杀纪念日活动总结
2015/03/24 职场文书
中考百日冲刺决心书
2015/09/22 职场文书
2017寒假社会实践心得体会范文
2016/01/14 职场文书