0

Estou tendo dificuldades de fazer com que o escudo preencher até o final da página. Como eu faço isso?

.circle {
  margin: auto;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #3c404f;
  background: linear-gradient(to right, var(--color1), var(--color2), var(--color1));
}

#circle1 {
  width: 256px;
  height: 256px;
  --color1: red;
  --color2: #C10101;
}

#circle2 {
  width: 206px;
  height: 206px;
  --color1: white;
  --color2: white;
}

#circle3 {
  width: 156px;
  height: 156px;
  --color1: red;
  --color2: #C10101;
}

#circle4 {
  width: 106px;
  height: 106px;
  --color1: blue;
  --color2: #02264D;
}

#star {
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(180DEG);
}

#star:before {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(70DEG);
  content: "";
  left: -50px;
}

#star:after {
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 35px solid white;
  transform: rotate(-70DEG);
  content: "";
  left: -48.8px;
  top: 0.1px;
}
<div id="circle1" class="circle">
  <div id="circle2" class="circle">
    <div id="circle3" class="circle">
      <div id="circle4" class="circle">
        <div id="star">
        </div>
      </div>
    </div>
  </div>
</div>

2
  • Você quer que o escudo ocupe a tela inteira?
    – Costamilam
    30/05/2018 às 16:26
  • Sim, acredito que fica melhor assim.
    – user64495
    4/06/2018 às 22:15

1 Resposta 1

1

Você pode utilizar VMIN ao invés de pixels. Assim o tamanho será definido igual ao menor tamanho da tela. No caso no PC ficaria a altura da tela, e no celular em pé ficaria a largura.

Dessa forma o escudo sempre ocupará a tela toda e não será cortado.

por exemplo:

.circle1{
     width: 100vmin;
     height: 100vmin;
}
.cicle2{
     width: 96vmin;
     height: 96vmin;
}

Eu usei os valores como exemplo, mas pro seu escudo você terá que calcular em porcentagem. 100vmin=100% do menor tamanho da tela.

Espero ter ajudado.

1
  • Não ficou exatamente igual. Um dos circulos não parece e ocupa mais da metade da tela.
    – user64495
    4/06/2018 às 22:20

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