6

Eu estou tentando fazer uma bandeira do brasil que seja responsiva. Porém me deparei com um problema com a faixa branca da bandeira.
OBS: não vou colocar o texto na faixa!

O que acontece é que a faixa na verdade é um border, porém eu não posso usar valor em % como border-width. Então quando a bandeira diminui a borda fica grossa, e conforme a bandeira cresce a borda fica fina... Como corrijo isso?

inserir a descrição da imagem aqui

Como posso corrigir isso pra minha borda também ficar responsiva junto com o restante da bandeira?
Como posso fazer uma borda responsiva?
Ou existe alguma outra técnica que posso usar sem ser a borda?

Segue o código.

.bandeira {
  max-width: 50%;
  margin: auto;
  border: 1px solid green;
  background-color: green;
  position: relative;
}
.box {
  padding-top: 56.25%;
  background-image: 
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.85) 0%, transparent 1%),
    radial-gradient(circle, navy 25%, transparent 26%),
    linear-gradient(-30deg, green 30%, transparent 31%, transparent 70%, green 71%),
    linear-gradient(30deg, green 30%, gold 31%, gold 70%, green 71%);
}

.faixa {
  position: absolute;
  width: 30%;
  height: 55%;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
}
.faixa::after {
  content: "";
  position: absolute;
  top: 30%;
  left: -70%;
  width: 200%;
  height: 200%;
  box-sizing: border-box;
  border: 10px solid #fff;
  border-radius: 50%;
}
<div class="bandeira">
  <div class="box">
    <div class="faixa"></div>
  </div>
</div>

6
  • Mudar o tamanho da borda com media query é uma opção, se não, retirar a borda e usar uma div com height baseado no vw ou algo assim
    – Costamilam
    Commented 16/01/2019 às 12:36
  • 2
    @GuilhermeCostamilam com media query eu vou ter "saltos" na espessura, pois ficaria tipo uma largura entre 320px e 768px, depois outra largura entre 768px e 992px... seria mudanças "secas" e não algo fluido como é o restante da bandeira. Repare que como ela é toda em % vc não tem "saltos" nos tamanhos. Com medidas em VH ou VW a bandeira pode deformar dependendo do aspect-ratio da tela do dispositivo não? Tipo em um monitor ultra-wide, ou um celular na vertical...
    – hugocsl
    Commented 16/01/2019 às 12:45
  • da pra colocar várias media query e não ter esses saltos, da muito trabalho mas funciona, se usar JS da pra fazer no evento de resize da tela, ai fica um pouco mais simples. "Com medidas em VH ou VW a bandeira pode deformar dependendo do aspect-ratio da tela do dispositivo não?" isso já não sei dizer
    – Costamilam
    Commented 16/01/2019 às 12:54
  • @GuilhermeCostamilam para ficar fluido acho que teria que trocar os PX da borda pelo menos a cada 5 ou 10px. Então se sua janela diminuir 10px de largura vc tem que mudar a borda para Npx... acredito não ser uma opção muito viável, apesar de que pode ser que de certo sim... mas acho que só com CSS deve ter alguma maneira mais prática
    – hugocsl
    Commented 16/01/2019 às 12:59
  • Faz a bandeira da Itália que é mais fácil rs :D
    – Sam
    Commented 16/01/2019 às 17:45

1 Resposta 1

2

Em vez de usar a propriedade border completa, use apenas o border-radius e coloque um background branco no ::before da faixa (desta forma a espessura da faixa não fica presa ao px fixo da borda), e será criado um círculo branco que será uma parte da faixa.

Agora crie outro pseudo ::after igual ao ::before, só que com um fundo azul do círculo que ficará por cima do branco, aumentando um pouco o top e o left, fazendo o efeito da faixa. Como agora os valores são todos em % ficará 100% responsivo.

Retirei a propriedade box-sizing: border-box que já não é necessária. Para dar uma compensada no "blur" da borda do círculo azul, alterei o transparent de 26% para 27%.

Código:

.bandeira {
  max-width: 50%;
  margin: auto;
  border: 1px solid green;
  background-color: green;
  position: relative;
}
.box {
  padding-top: 56.25%;
  background-image: 
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.85) 0%, transparent 1%),
    radial-gradient(circle, navy 25%, transparent 27%),
    linear-gradient(-30deg, green 30%, transparent 31%, transparent 70%, green 71%),
    linear-gradient(30deg, green 30%, gold 31%, gold 70%, green 71%);
}

.faixa {
  position: absolute;
  width: 30%;
  height: 55%;
  border-radius: 50%;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  overflow: hidden;
}

.faixa::before, .faixa::after{
   content: "";
   width: 200%;
   height: 200%;
   border-radius: 50%;
   position: absolute;
}

.faixa::before {
   background: #fff;
   top: 30%;
   left: -70%;
}

.faixa::after {
   background: navy;
   top: 35%;
   left: -72%;
}
<div class="bandeira">
  <div class="box">
    <div class="faixa"></div>
  </div>
</div>

2
  • Legal Sam, é uma abordagem que resolve. Mesmo não sendo um border responsivo, quebra o galho!
    – hugocsl
    Commented 16/01/2019 às 18:43
  • Acho que o único jeito é evitar borda, já que, até onde sei, não existe borda responsiva.
    – Sam
    Commented 16/01/2019 às 18:54

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 .