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?
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>
vw
ou algo assimN
px... 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