Criar um quadrado é muito fácil, não? Basta setar a altura igual a largura e estamos felizes. Porém, por se tratar de um quadrados responsivo, estamos pensando em porcentagem.
Se eu definir um quadrado com 10% de largura e 10% de altura. Adivinha o que vai acontecer? Você acertou! Não será um quadrado
Exemplo:
10% x 10%
Depois de muito tempo estudando uma maneira de fazer um quadrado responsivo, cheguei a seguinte solução:
O padding é sempre relativo a largura, logo, se você definir a altura do elemento com 0 e o padding-bottom com a porcentagem da altura você terá o resultado esperado. Segue exemplo abaixo:
