Css箭头进度条(Css arrow Progress bar)

Css箭头进度条(Css arrow Progress bar)

我目前正在学习关于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设置完成百分比 
I'm currently in the process of learning all about css, so I'm trying to generate different shapes with different functionalities.
 
 
I am currently working on a project which requires a horizontal arrow to display the 'progress' of a transaction occurring.
 
So i'm trying to generate an arrow 'progress bar' like:
 
                 |\
                 | \
+----------------+  \
|XX|    10%          >
+----------------+  /
  \              | /
   \             |/
    \the XX's depict a different color.
 
I currently Am able to 'fill' up until the arrow head, but the way I've generated the arrow head,I can't seem to 'fill' it in line as well (i.e. at ~90%, half of the physical head should be full) - and not the whole thing.
 
 
My current snippet:
 
 
 
  
  
.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> 
  
 
 
 
this doesn't really work since you 'see the points' outside of the arrow's body, making it seem like another arrow is appearing in front of it, rather than 'filling it up'. 
 
 
a fiddle lives here
 
 
I've used a hover effect as a demo, although I would like to use jquery to set the percentage complete
                
最满意答案
                
                    
                        
 您可以只动画.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> 
  
 
You can animate just the width of the .prog element and set it to 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>