我目前正在学习所有关于CSS的知识,所以我试图生成具有不同功能的不同形状.
我目前正在开发一个项目,该项目需要一个水平箭头来显示正在发生的交易的“进度”.
所以我试图生成一个箭头’进度条’,如：
|\
| \
+----------------+ \
|XX| 10% >
+----------------+ /
\ | /
\ |/
\the XX's depict a different color.
我目前能够“填充”直到箭头,但是我生成箭头的方式,我似乎也不能“填充”它(也就是大约90％,物理的一半)头应该是满的) – 而不是整个事情.
我目前的片段：
.arrow{
margin:0 auto;
height:100px;
width:200px;
background:red;
margin-top:60px;
position:relative;
/*overflow:hidden;*/
}
.arrow:before,.prog:before{
content:"";
position:absolute;
right:-100px;
border-left:100px solid red;
border-top:100px solid transparent;
border-bottom:100px solid transparent;
top:-50%;
}
.prog{
position:absolute;
height:100%;
width:0%;
background:blue;
transition: all 0.8s;
}
.arrow:hover .prog{
width:100%;
}
.prog:before{
border-left:100px solid transparent;
transition: all 0.8s;
}
.arrow:hover .prog:before{
border-left:100px solid blue;
}
<div class="arrow">
<div class="prog"></div>
</div>
这并没有真正起作用,因为你“看到箭头身体外面的点”,看起来就像是在它前面出现另一个箭头,而不是“填满它”.
我使用悬停效果作为演示,虽然我想使用jquery来设置百分比完成
解决方法
您可以仅为.prog元素的宽度设置动画,并将其设置为overlfow：hidden
.prog{
width: 0%;
height:100%;
position: relative;
overflow: hidden;
transition: width 0.8s
}
.arrow:hover .prog{
width: 300px;
}
.arrow{
height:200px;
margin:0 auto;
width:300px;
position:relative;
margin-top:60px;
}
.arrow,.arrow:before,.arrow:after{
z-index:1
}
.prog,.prog:before,.prog:after{
z-index:2
}
.arrow:before,.arrow:after,.prog:after{
content:"";
position:absolute;
}
.arrow:before,.prog:before{
left: 200px;
top: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
.arrow:after,.prog:after{
margin: 0 auto;
height: 100px;
width: 200px;
top: 50px;
left: 0
}
.arrow:before{
border-left: 100px solid red
}
.arrow:after{
background: red
}
.prog:before{
border-left: 100px solid blue
}
.prog:after{
background: blue
}
<div class="arrow">
<div class="prog"></div>
</div>
