Estou tentando criar uma barra de progresso que tenha o formato de um triângulo retângulo, como na imagem abaixo:
Na verdade é uma div com tamanho de 70% x 50px
e uma borda de 1px, e um pseudo ::after
com uma cor de fundo que vai "enchendo" de forma animada representando o progresso.
O problema é que não consegui fazer com que essa div assuma esse formato triangular com as bordas.
Tentei até usar clip-path
para "recortar" a parte de cima da div, mas a borda de cima também é eliminada, ficando assim, o que não é desejável:
É possível fazer isso no CSS?
O código que tenho é este (sem clip-path):
$(function(){
$("#progresso").addClass("ativo");
});
#progresso{
width: 70%;
height: 50px;
border: 1px solid #000;
position: relative;
}
#progresso::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: red;
transition: width 2s linear;
}
#progresso.ativo::after{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progresso"></div>
Código com clip-path:
$(function(){
$("#progresso").addClass("ativo");
});
#progresso{
width: 70%;
height: 50px;
border: 1px solid #000;
position: relative;
clip-path: polygon(0 100%, 100% 1px, 100% 100%);
}
#progresso::after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background-color: red;
transition: width 2s linear;
}
#progresso.ativo::after{
width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="progresso"></div>