Css arrow进度条

Question

我目前正在学习所有关于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来设置完成百分比

Answer 1

您可以仅为.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, .prog: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>