Простая задачка: как сделать квадрат в css?

Question

[Андрей]

Но есть загвоздка. А если подробнее:
Как сделать блок с равными сторонами, в котором явно задается только одна сторона?
Например, ширина 300px, высота автоматически 300px.
Задачка на знание css, с которой я не справился, но понимаю, что решение на поверхности.

Comments

[Андрей]

Решение нашел быстро, но интересны ваши варианты.

[Сергей delphinpro]

Вы должны знать что вертикальные внутренние (внешние тоже) отступы (padding-top, padding-bottom), если они заданы в процентах, рассчитываются от ширины родительского блока. Зная это, можно быстро сообразить, что 100% отступ будет равен 100% ширины. А это квадрат. Таким образом решение задачи может быть следующим:

.square {
  width: 100%;
  padding-top: 100%;

  background: black;
}

Answer 1

[Just A Bit]

<div class="box"></div>

.box {
  width: 150px;
  overflow: hidden;
  background: #4679BD;
}
.box:before {
  content: "";
  display: block;
  padding-top: 100%;
}

Результат https://codepen.io/anon/pen/WYMOoZ

Comments

[Андрей]

Да, именно такое решение с псевдоэлементом я и нашел. Это просто трюк, или же есть практическая польза от этого решения?

[Just A Bit]

AndrewRusinas, зависит напрямую что вы пытаетесь сделать.