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 相关文章推荐
移动端rem布局的两种实现方法
Jan 03 HTML / CSS
使用css3制作登录表单的步骤
Apr 07 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
CSS3 :default伪类选择器使用简介
Mar 15 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5 实战PHP之Web页面表单设计
Oct 09 HTML / CSS
HTML5是什么 HTML5是什么意思 HTML5简介
Oct 26 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
HTML5+css3:3D旋转木马效果相册
Jan 03 HTML / CSS
使用canvas实现黑客帝国数字雨效果
Jan 02 HTML / CSS
HTML5 body设置自适应全屏
May 07 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 join函数应用
2011/05/04 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
php随机抽奖实例分析
2015/03/04 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP实现合并两个排序链表的方法
2018/01/19 PHP
input+select(multiple) 实现下拉框输入值
2009/05/21 Javascript
使用Plupload实现直接上传附件至七牛云存储
2014/12/26 Javascript
jQuery中:file选择器用法实例
2015/01/04 Javascript
详解angular2实现ng2-router 路由和嵌套路由
2017/03/24 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
vue实现tab切换外加样式切换方法
2018/03/16 Javascript
JavaScript笛卡尔积超简单实现算法示例
2018/07/30 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
vue利用v-for嵌套输出多层对象,分别输出到个表的方法
2018/09/07 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
详解Python中for循环的使用
2015/04/14 Python
Python探索之创建二叉树
2017/10/25 Python
python微信跳一跳游戏辅助代码解析
2018/01/29 Python
python 编写简单网页服务器的实例
2018/06/01 Python
Python3中在Anaconda环境下安装basemap包
2018/10/21 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
python numpy数组复制使用实例解析
2020/01/10 Python
运行tensorflow python程序,限制对GPU和CPU的占用操作
2020/02/06 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
萨克斯第五大道的折扣店:Saks Fifth Avenue OFF 5TH
2016/08/25 全球购物
俄罗斯韩国化妆品网上商店:Cosmasi.ru
2019/10/31 全球购物
棉花姑娘教学反思
2014/02/15 职场文书
中国在我心中演讲稿
2014/09/13 职场文书