Css箭头进度栏 [英] Css arrow Progress bar

问题描述

我目前正在学习所有关于css的过程，因此我尝试生成具有不同功能的不同形状。

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.

我目前能够填满直到箭头，箭头，我似乎不能填它在线（即在〜90％，一半的物理头应该是满的） - 而不是整个事情。

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.

我当前的代码段：

.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'.

一个小提琴住在这里

我使用悬停效果作为演示，使用jquery设置完成百分比

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>

这篇关于Css箭头进度栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！