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 08 HTML / CSS
一款基于css3的动画按钮代码教程
Nov 23 HTML / CSS
初探CSS3中的calc()功能
Jul 14 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
Oct 30 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
html5+css3气泡组件的实现
Nov 21 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
HTML5通用接口详解
Jun 12 HTML / CSS
HTML5中图片之间的缝隙完美解决方法
Jul 07 HTML / CSS
Canvas图片分割效果的实现
Jul 29 HTML / CSS
如何利用 CSS Overview 面板重构优化你的网站
Oct 24 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
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
php实现倒计时效果
2015/12/19 PHP
php实现基于pdo的事务处理方法示例
2017/07/21 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
IE之动态添加DOM节点触发window.resize事件
2010/07/27 Javascript
js屏蔽鼠标键盘(右键/Ctrl+N/Shift+F10/F11/F5刷新/退格键)
2013/01/24 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
js实现最短的XML格式化工具实例
2015/03/12 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
jQuery弹出窗口简单实现代码
2017/03/09 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
vue实现输入框自动跳转功能
2020/05/20 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python中map、any、all函数用法分析
2015/04/21 Python
python通过索引遍历列表的方法
2015/05/04 Python
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
深入理解python多进程编程
2016/06/12 Python
python如何修改装饰器中参数
2018/03/20 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python实现的分层随机抽样案例
2020/02/25 Python
python re.match()用法相关示例
2021/01/27 Python
pycharm 实现调试窗口恢复
2021/02/05 Python
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
屈臣氏乌克兰:Watsons UA
2019/10/29 全球购物
公司企业表扬信
2014/01/11 职场文书
英语老师推荐信
2014/02/26 职场文书
了解Kubernetes中的Service和Endpoint
2022/04/01 Servers