文章详情
html+css实现固定视角的长方体
标签:
  • html
  • css
日期:2020-7-17 18:05
摘要:两种实现方式,切图or纯css

这个需求在工作中遇到好几次,所以记录一下。

就是这样子的,图中的这种蓝色、黄色的柱子。

先用切图的方式实现,做个简单的分析,这个柱子由三部分构成:

top.png定位到顶部,bottom.png定位到底部,mid.png只要切一条横线然后无限拉伸充满容器,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html+css实现固定视角的长方体</title>
<style type="text/css">
body {
background: #081b4d;
}
.square-box {
width: 40px;
height: 120px;
margin: 100px;
position: relative;
}
.square-box .top {
width: 40px;
height: 20px;
background: url(img/top.png);
background-size: contain;
position: absolute;
top: -10px;
left: 0;
}
.square-box .mid {
width: 100%;
height: 100%;
background: url(img/mid.png);
background-size: contain;
}
.square-box .bottom {
width: 40px;
height: 20px;
background: url(img/bottom.png);
background-size: contain;
position: absolute;
bottom: -10px;
left: 0;
}
</style>
</head>
<body>
<div class="square-box">
<div class="top"></div>
<div class="mid"></div>
<div class="bottom"></div>
</div>
</body>
</html>


再用纯css来实现,做个简单的分析,构成如下:

利用向左和向右的两个三角形拼在一起就变成了棱形,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html+css实现固定视角的长方体</title>
<style type="text/css">
body {
background: #081b4d;
}
.left {
float: left;
}
.right {
float: right;
}
.square-box {
width: 40px;
height: 120px;
margin: 100px;
position: relative;
}
.square-box .top {
position: absolute;
top: -10px;
left: 0px;
}
/* 向左的三角形 */
.square-box .top .left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #7bdafb;
border-bottom: 10px solid transparent;
}
/* 向右的三角形 */
.square-box .top .right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #7bdafb;
border-bottom: 10px solid transparent;
}
.square-box .bottom {
position: absolute;
bottom: -10px;
left: 0px;
}
.square-box .bottom .left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 20px solid #5eb6dd;
border-bottom: 10px solid transparent;
}
.square-box .bottom .right {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-left: 20px solid #4a8cbc;
border-bottom: 10px solid transparent;
}
.square-box .mid {
width: 100%;
height: 100%;
}
.square-box .mid>div {
width: 50%;
height: 100%;
}
.square-box .mid .left {
background: #4c99bb;
}
.square-box .mid .right {
background: #285c83;
}
</style>
</head>
<body>
<div class="square-box">
<div class="top">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="mid">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="bottom">
<div class="left"></div>
<div class="right"></div>
</div>
</div>
</body>
</html>

用纯css实现比较好,如果再来个需求,每个柱子的颜色不一样,那切图是不是要疯,嘿嘿。
其实还有一种实现,用css3的3d来做,但是不方便做动画,那是用6个面拼凑出一个真3d的长方体,但是做长度拉伸动画会比较麻烦,6个面的角度和位置都要维护。

发送
评论(0)