Skip to main content
Tweeted twitter.com/StackOverflowPT/status/1166228954417631233
adicionou 905 caracteres ao conteúdo
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

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>

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:

$(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>

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>

adicionou 133 caracteres ao conteúdo; título editado
Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Como criar uma barra de progresso triangular com bordas?

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 a borda.

Como criar uma div nesse formato com as bordas no CSS?.

Tentei até usar clip-path para "recortar" a parte de cima da div, mas não consegui fazer com que a borda de cima permanecesse.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:

$(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>

Como criar uma barra de progresso triangular?

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

Como criar uma barra de progresso triangular com bordas?

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:

$(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>

Fonte Link
Sam
  • 80,8mil
  • 22
  • 73
  • 128

Como criar uma barra de progresso triangular?

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