CSS三角形填充进度条

Question

我实际上已经谷歌搜索了一些信息，但没有找到它。

我的目标是实现类似进度条样式的三角形填充。有什么方法吗？

JSFiddle

.angle {
    width: 0; 
    height: 0; 
    border-left: 75px solid transparent;
    border-right: 75px solid transparent;       
    border-bottom: 75px solid black;
}

- Shaxrillo

---

三角形的外部会是一个块状颜色吗？ - jbutler483

@jbutler483 抱歉.. 你所说的“block colour”是什么意思？ - Shaxrillo

你的背景会是一个纯色吗（即在三角形外部）？ - jbutler483

@jbutler483 其实这并不重要。我需要类似于进度条或类似于此的东西。有没有办法可以创建类似三角形的进度条？ - Shaxrillo

这是有的。使用这个想法会是我的建议... - jbutler483

@jbutler483 谢谢您。 - Shaxrillo

Answer 1

为了制作三角形，我将使用两个伪元素从正方形 div 中“裁剪”它。然后，使用嵌套的 div，使用绝对定位使您可以将其“填充”到某个值（通过设置 .amount div 的高度为 %）。

.amount {
  position: absolute;
  height: 0%;
  width: 100%;
  bottom: 0;
  left: 0;
  transition: all 1s;
  background: tomato;
}
.tri {
  position: relative;
  height: 200px;
  width: 200px;
  background: lightgray;
}
.tri:before,
.tri:after {
  content: "";
  position: absolute;
  border-top: 200px solid white;
  top: 0;
  z-index: 8;
}
.tri:before {
  border-left: 100px solid transparent;
  left: 50%;
}
.tri:after {
  border-right: 100px solid transparent;
  left: 0;
}
.tri:hover .amount {
  height: 100%;
}

<div class="tri">
  <div class="amount"></div>
</div>

- jbutler483

---

很好，但这可以通过使用伪元素在一个元素中实现。 - Max Payne

@TimKrul：是的，但是当操作“amount”时，操作一个“真实”的元素比操作那个有限的伪元素更加明智。 - jbutler483

我怎么知道你会对这个问题有答案！哈哈，干得好。 - Ruddy

@Ruddy：我毫无头绪 :P - jbutler483

Answer 2

可能是这样的吗？

.angle {
    position: relative;
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid blue;
}

.angle:after {
    position: absolute;
    content: "";
    top: 0;
    left: 50%;
    margin-left: -50px;
    width: 0; 
    height: 0; 
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid black;
}

fiddle: {{链接1:http://jsfiddle.net/bkaxzLnu/3/}}

- Caio Kawasaki

Answer 3

这里有另一种CSS ONLY，NO-BORDERS，NO AFTER/BEFORE HACKS的选项：

您可以使用clip-path。它允许您仅显示元素的一部分并隐藏其余部分。

因此，您可以像这样做：

  .amount {
    position: absolute;
    height: 100%;
    width: 0%;
    bottom: 0;
    left: 0;
    transition: all 1s;
    background: tomato;
  }

  .tri {
    position: relative;
    width: 500px;
    height: 50px;
    background: #ddd;

    /* triangle */
    clip-path: polygon( 100% 0%,100% 100%, 0% 100%);
  }
  .tri:hover .amount {
    width: 100%;
    background: chartreuse ;
  }

<div class="tri">
  <div class="amount"></div>
</div>

- lalengua