版权声明：转载请注明出处 https://blog.csdn.net/weixin_43132005/article/details/89849607
最近工作中有这么个需要，要画一个类似金字塔的东西，长这样的
接下来该怎么实现呢？
三角形都知道要用 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">高 危</div>
<div class="describe describe3">中高危</div>
<div class="describe describe4">中 危</div>
<div class="describe describe5">低 危</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
});
}