我目前正在学习所有关于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; …