Как используя css сделать квадрат?

Question

[vvvadimos]

как сделать квадратным блок, если у него есть какая-то ширина, я знаю) псевдоэлементу padding-top: 100% и в итоге получается квадрат. но задача в том, чтобы сделать квадрат, имея только высоту блока, притом что она в %.

Comments

[archelon]

можно попробовать вместо процентов использовать vh (одинаковое значение для ширины и высоты).

[vvvadimos]

archelon, не то

Answer 1

[Владимир Проскурин]

Есть костыльное решение. В блок положить пропорциональную квадратную картинку с height: 100% (можно ее спрятать, но не display: none, а visibility: hidden; )
Пример https://jsfiddle.net/Vlad_IT/eme9c2ya/1/

Comments

[vvvadimos]

да, неплохое решение

Answer 2

[ukoHka]

Чисто на css такого не сделать, нужен js.
На css можно просто создать иллюзию квадрата, например так
Тут по факту блок не квадратный, просто фоном стоит квадратная картинка.