我实际上用谷歌搜索并搜索了一些信息,但找不到它。
我的目标是实现类似于进度条样式的东西,例如填充三角形内部。有什么办法吗?
.angle {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid black;
}
答案 0 :(得分:10)
为了制作三角形,我会使用两个伪元素来剪切掉它。方形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>
&#13;
答案 1 :(得分:1)
可能是这样的吗?
.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;
}
答案 2 :(得分:0)
这是另一个仅限CSS ,无边框,没有/之后选项:
您可以使用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>