我实际上用谷歌搜索了一些信息,但找不到。
我的目标是实现类似于进度条样式的东西,例如填充三 Angular 形内部。有什么办法吗?
.angle {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid black;
}
最佳答案
为了制作三 Angular 形,我会使用两个伪元素将其从正方形 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>
关于html - 进度条的 CSS 三 Angular 形填充,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29538419/