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教程(2):网页边框半径和网页圆角
Apr 02 HTML / CSS
HTML5时代CSS设置漂亮字体取代图片
Sep 04 HTML / CSS
一款基于css3的列表toggle特效实例教程
Jan 04 HTML / CSS
CSS3实现3D翻书效果
Jun 20 HTML / CSS
html+css3实现的登录界面
Dec 09 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
20佳惊艳的HTML5应用程序示例分享
May 03 HTML / CSS
html5 button autofocus 属性介绍及应用
Jan 04 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(二)
Jan 21 HTML / CSS
HTML5中的Web Notification桌面通知功能的实现方法
Jul 29 HTML / CSS
HTML5实现无刷新修改URL的方法
Nov 14 HTML / CSS
Html5写一个简单的俄罗斯方块小游戏
Dec 03 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
PHP4(windows版本)中的COM函数
2006/10/09 PHP
PHP防止跨域提交表单
2013/11/01 PHP
QQ互联一键登录审核不通过的解决方案
2014/09/10 PHP
PHP简单获取视频预览图的方法
2015/03/12 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
Laravel实现定时任务的示例代码
2017/08/10 PHP
PHP迭代器接口Iterator用法分析
2017/12/28 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
网页和浏览器兼容性问题汇总(draft1)
2009/06/01 Javascript
用Javascript数组处理多个字符串的连接问题
2009/08/20 Javascript
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
jquery对表单操作2
2011/04/06 Javascript
javascript中setTimeout的问题解决方法
2014/05/08 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
用js读、写、删除Cookie代码分享及详细注释说明
2014/06/05 Javascript
js实现touch移动触屏滑动事件
2015/04/17 Javascript
JavaScript精炼之构造函数 Constructor及Constructor属性详解
2015/11/05 Javascript
JS简单实现自定义右键菜单实例
2017/05/31 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
微信小程序自定义单项选择器样式
2019/07/25 Javascript
用Python遍历C盘dll文件的方法
2015/05/06 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
美国廉价机票预订网站:Cheapfaremart
2018/04/28 全球购物
澳大利亚领先的皮肤诊所:Skin Matrix(抗衰老、痤疮专家、药妆护肤)
2018/05/20 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
视光学专业毕业生推荐信
2013/10/28 职场文书
信息管理应届生求职信
2014/03/07 职场文书
《画家乡》教学反思
2014/04/22 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
先进班集体事迹材料
2014/12/25 职场文书
求职信格式范文
2015/03/19 职场文书
写给女朋友的检讨书
2015/05/06 职场文书
离婚答辩状怎么写
2015/05/22 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL