CSS三角形填充进度条 [英] CSS triangle filling for a progress bar

问题描述

我实际上是谷歌搜索一些信息，但找不到它。

I actually googled and searched some info but couldn't find it.

我的目标是实现类似于进度条样式的内容，如填充三角形。有什么办法吗？

My aim is to achieve something similar to progress bar styling such as filling inside of triangle. Is there any ways?

JSFiddle

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

推荐答案

，我会使用两个伪元素来切出的方形div。然后，使用嵌套div，使用绝对定位，以允许您'填充'到某个值（通过设置 .amount div的高度在％）。

In order to make the triangle, I would use two pseudo elements to 'cut it out' of the square div. Then, with a nested div, use absolute positioning to allow you to 'fill' it to a certain value (by setting the .amount div's height in %).

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

这篇关于CSS三角形填充进度条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！