HTML CSS 实现金字塔

最新推荐文章于 2024-04-02 20:23:57 发布

迷路大叔

最新推荐文章于 2024-04-02 20:23:57 发布

阅读量2.4k

点赞数

分类专栏： html+css 文章标签： html css javascript

本文链接：https://blog.csdn.net/weixin_43132005/article/details/89849607

版权

html+css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近工作中有这么个需要，要画一个类似金字塔的东西，长这样的在这里插入图片描述
接下来该怎么实现呢？

三角形都知道要用 div 的 border 了

直接上代码

// html 部分
...
<!-- 箭头使用了 bootstrap 的图标字体 -->
<link rel="stylesheet" type="text/css" href="lib/Bootstrap/css/bootstrap.min.css"/>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
...
<body>
  <div class="container">
    <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 rightarow glyphicon glyphicon-arrow-right"></div>
      <div class="comarow leftarow glyphicon glyphicon-arrow-left"></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 class="tuli">
      <div class="color color1"><div class="bgcolor bgcolor1"></div><div>极高危</div></div>
      <div class="color color2"><div class="bgcolor bgcolor2"></div><div>高危</div></div>
      <div class="color color3"><div class="bgcolor bgcolor3"></div><div>中高危</div></div>
      <div class="color color4"><div class="bgcolor bgcolor4"></div><div>中危</div></div>
      <div class="color color5"><div class="bgcolor bgcolor5"></div><div>低危</div></div>
    </div>
  </div>
</body>

// css 部分
<style>
/* 主体三角形 */
.sanjiao{
   width: 400px;
   height: 300px;
   display: inline-block;
   position: relative;
 }
 .sj{
   margin: 0 auto;
   height: 0;
   border-top: 0 solid transparent;
   border-right: 30px solid transparent;
   border-left: 30px solid transparent;
   border-bottom-width: 60px;
   border-bottom-style: solid;
   box-sizing: content-box;
 }
 .sj1{
   width: 0;
   border-bottom-color: #ed3535;
 }
 .sj2{
   width: 60px;
   border-bottom-color: #ed5835;
 }
 .sj3{
   width: 120px;
   border-bottom-color: #f39d38;
 }
 .sj4{
   width: 180px;
   border-bottom-color: #f9c21a;
 }
 .sj5{
   width: 240px;
   border-bottom-color: #71c438;
 }
 /* 指向箭头 */
 .comarow{
   color: #FF0000;
   font-size: 30px;
   position: absolute;
 }
 .rightarow{
   top: 255px;
   margin-left: 10px;
 }
 .leftarow{
   top: 255px;
   margin-left: 360px;
 }
 /* 每层名称 */
 .describe{
   position: absolute;
   margin-left: 179px;
 }
 .describe1{
   top: 22px;
 }
 .describe2{
   top: 82px;
 }
 .describe3{
   top: 142px;
 }
 .describe4{
   top: 202px;
 }
 .describe5{
   top: 262px;
 }
 /* 图例 */
 .tuli{
  display: inline-block;
   vertical-align: top;
   margin-left:20px;
 }
 .color{
   height: 20px;
   line-height: 20px;
   font-size: 14px;
   margin-top: 20px;
 }
 .color div{
   display: inline-block;
 }
 .color .bgcolor{
   width: 30px;
   height: 20px;
   vertical-align: middle;
   margin-right: 10px;
 }
 .color1{
   color: #ed3535;
 }
 .color1 .bgcolor1{
   background: #ed3535;
 }
 .color2{
   color: #ed5835;
 }
 .color2 .bgcolor2{
   background: #ed5835;
 }
 .color3{
   color: #f39d38;
 }
 .color3 .bgcolor3{
   background: #f39d38;
 }
 .color4{
   color: #f9c21a;
 }
 .color4 .bgcolor4{
   background: #f9c21a;
 }
 .color5{
   color: #71c438;
 }
 .color5 .bgcolor5{
   background: #71c438;
 }
</style>

效果如图在这里插入图片描述
当然我的箭头是需要移动的，接下来我们让它动

// js 部分
  setLevel(3);
  // level 1-5代表从上到下的层
  function setLevel(level) {
    switch (level) {
      case 1:
        changeArrow("15px", "130px", "236px");
        break;
      case 2:
        changeArrow("75px", "100px", "270px");
        break;
      case 3:
        changeArrow("135px", "70px", "300px");
        break;
      case 4:
        changeArrow("195px", "40px", "330px");
        break;
      case 5:
        changeArrow("255px", "20px", "350px");
        break;
      default:
        console.log("未匹配到项");
        break;
    }
 }
 // 改变左右箭头的位置
 function changeArrow(top, rightArrow, leftArrow) {
   $(".rightarow").css({
     "top": top,
     "margin-left": rightArrow
   });
   $(".leftarow").css({
     "top": top,
     "margin-left": leftArrow
   });
 }

迷路大叔

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS 实现金字塔

最近工作中有这么个需要，要画一个类似金字塔的东西，长这样的接下来该怎么实现呢？三角形都知道要用 div 的 border 了直接上代码// html 部分...<link rel="stylesheet" type="text/css" href="lib/Bootstrap/css/bootstrap.m...
复制链接

扫一扫