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 a borda.
Como criar uma div nesse formato com as bordas no CSS?
Tentei usar clip-path
mas não consegui fazer com que a borda de cima permanecesse.
O código que tenho é este:
$(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>