0

Estou tentando criar uma barra de progresso que tenha o formato de um triângulo retângulo, como na imagem abaixo:

inserir a descrição da imagem aqui

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:

inserir a descrição da imagem aqui

É 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>

1 Resposta 1

6

Tirando o fato da borda de cima não ser exatamente de um pixel, dá pra fazer com dois gradients:

.volume {
  width:70%;height:50px;
  border: 1px solid black; border-width:0 1px 1px 0;
  background:linear-gradient(to bottom right, #fff 0%, #fff 50%, #000 50%, #000 51%, transparent 51%),
    linear-gradient(90deg,red 0%, red 65%, gray 65%);
}
<div class="volume"></div>

Disse dois para que um deles seja o progresso. Se fosse só o triângulo vermelho, seria só gradient + fundo sólido.


Animando com CSS puro:

Como gradients não são "animáveis" com CSS puro (com JS daria para animar o primeiro exemplo), pode usar um pseudoelemento para fazer a animação:

.volume {
  width:70%;height:50px;
  border: 1px solid black; border-width:0 1px 1px 0;
  background:linear-gradient(to bottom right, #fff 0%, #fff 50%, #000 50%, #000 51%, transparent 51%);
}

.volume::after {
  content:'';display:block;position:relative;
  width:0;height:100%;
  background:red;
  z-index:-1;
  animation-name:teste;
  animation-duration:4s;
  animation-iteration-count: infinite;
}

@keyframes teste {
  0%   {width:0}
  50% {width:100%}
  100% {width:0}
}
<div class="volume"></div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .