A bandeira Japonesa, também conhecida como "Nisshoki" ou "Hinomaru", possui um desenho minimalista e elegante. Neste artigo você aprenderá a desenhá-la utilizando um único elemento HTML.

Serão usadas as especificações oficiais da bandeira, veja abaixo:

Proporção 2:3
Diâmetro do círculo 3/5 da altura
Cor do círculo em hexadecimal #BC002D

O ponto de partida do desenho será o elemento <div></div>. Esse elemento é um container utilizado para agrupar outros elementos HTML. Neste exercício ele será o plano de fundo branco da bandeira Japonesa.

Passo 1: Crie a Estrutura HTML da Bandeira

Crie um novo arquivo HTML no seu editor de código favorito. Neste documento, adicione um elemento <div></div> com o ID "flag". Esse será o container da bandeira. Se preferir, copie o código abaixo:

<!DOCTYPE html>
<html>
<head>
  <title>Desenhando com CSS: Bandeira Japonesa</title>
</head>
<body>
  <div id="flag"></div>
</body>
</html>

Passo 2: Posicione a Bandeira no Centro e Adicione os Estilos do Fundo

<!DOCTYPE html>
<html>
<head>
  <title>Desenhando com CSS: Bandeira Japonesa</title>
  <style>
    :root {
      --b-color: #D1D5DB;
      --bg-color: #FAFAFA;
    }

    body {
      background-color: var(--bg-color);
      display: grid;
      height: 100vh;
      padding: 1rem;
      place-items: center;
    }

    #flag {
      aspect-ratio: 3/2;
      background-color: white;
      border: 1px solid var(--b-color);
      max-width: 420px;
      position: relative;
      width: 100%;
    }
  </style>
</head>
<body>
	<div id="flag"></div>
</body>
</html>

No código acima repare na utilização da propriedade aspect-ratio. Ela permite especificar a proporção pela qual a largura e altura de um elemento serão calculados. Como optou-se pela utilização da proporção oficial da bandeira, o valor escolhido foi 3/2.

Passo 3: Crie o Círculo e o Posicione no Centro da Bandeira

<!DOCTYPE html>
<html>
<head>
	<title>Desenhando com CSS: Bandeira Japonesa</title>
  <style>
    :root {
      --b-color: #D1D5DB;
      --j-red: #BC002D;
      --bg-color: #FAFAFA;
    }

    body {
      background-color: var(--bg-color);
      display: grid;
      height: 100vh;
      padding: 1rem;
      place-items: center;
    }

    #flag {
      aspect-ratio: 3/2;
      background-color: white;
      border: 1px solid var(--b-color);
      max-width: 420px;
      position: relative;
      width: 100%;
    }

    #flag::before {
      aspect-ratio: 1 / 1;
      background-color: var(--j-red);
      border-radius: 50%;
      content: "";
      height: 60%;
      left: 50%;
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="flag"></div>
</body>
</html>

No código acima, novamente utilizou-se a propriedade aspect-ratio. Dessa vez para especificar a proporção do círculo que é 1:1.

Confira o resultado do desafio

Conclusão

Por meio desse projeto foi possível abordar tópicos intermediários do CSS como pseudo-elements, position, variables e aspect-ratio. O intuito de restringir as opções (como utilizar apenas um elemento HTML) é justamente forçar a exploração das possibilidades de uma tecnologia. Possivelmente a aborgem deste desafio não foi a mais intuitiva, porém favoreceu o exercício de vários tópicos relevantes do CSS.

Gostou do artigo? Me ajude compartilhando nas redes sociais.

Sugestões? Entre em contato comigo. Ficarei feliz com o seu feedback.