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'.
I've used a hover effect as a demo, although I would like to use jquery to set the percentage complete
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>Although this may only be suitable for block color backgrounds, I thought I'd add it here (as I was learning I found that 'cutting the arrow out' was also an option). I started with a rectangle and 'cut the corners out' to create this:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 70%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.perc {
position: absolute;
top: 0;
width: 0%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
z-index: 5;
transition: all 0.8s;
}
.arrow:hover .perc {
width: 100%;
}<div class="arrow">
<div class="perc"></div>
</div>Let's not forget those who prefer Jsfiddle's instead
It would also allow for a gradient colouring
来源：https://stackoverflow.com/questions/28281127/css-arrow-progress-bar