我实际上用谷歌搜索并搜索了一些信息，但找不到。
My aim is to achieve something similar to progress bar styling such as filling inside of triangle. Is there any ways? 
JSFiddle http://jsfiddle.net/Shaxrillo/bkaxzLnu/1/
.angle {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid black;
}
为了制作三角形，我将使用两个伪元素从方形 div 中“剪掉”它。然后，对于嵌套的 div，使用绝对定位来允许您将其“填充”到某个值（通过设置.amountdiv 的高度（以 % 表示）。
.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>