Question

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

我目前正在开展一个项目，该项目需要一个水平箭头来显示“进展”。发生的交易。

所以我试图生成一个箭头＆＃39;进度条＆＃39;像：

                 |\
                 | \
+----------------+  \
|XX|    10%          >
+----------------+  /
  \              | /
   \             |/
    \the XX's depict a different color.

我目前能够填补＆＃39;直到箭头，但我生成箭头的方式，我似乎无法填补＆＃39;它也符合要求（即约90％，物理头部的一半应该是满的） - 而不是整个事物。

我当前的片段：

＆＃13;

.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;
}

＆＃13;

<div class="arrow">
    <div class="prog"></div>
</div>

＆＃13;

这并不是真的有用，因为你看到了点＆＃39;在箭头的身体之外，看起来像是另一个箭头出现在它的前面，而不是“填满它”。

a fiddle lives here

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

Answer 1

您只需为.prog元素的宽度设置动画并将其设置为overlfow: hidden

＆＃13;

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

＆＃13;

<div class="arrow">
    <div class="prog"></div>
</div>

＆＃13;

Answer 2

虽然这可能只适用于块颜色背景，但我想我会在这里添加它（因为我在学习时发现'切出箭头'也是一种选择）。我从一个矩形开始，然后“剪掉角落”来创建它：

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

我们不要忘记那些喜欢Jsfiddle's而不是

的人

它还允许渐变着色

Css arrow进度条

2 个答案: