Квадратный блок

задайте пропорции

by Ankhena

HTML

<div class="wrap">
  <div class="content">Какой-то текст</div>
</div>

CSS

.wrap {
  position: relative;
  width: 50%;
  //height: auto;
  margin: 20px auto;
  background: #eee;
}
.wrap::after {
  content: '';
  display: block;
  padding-top: 100%; /*установите ваши пропорции, в данном случае квадрат*/
  width: 1px; /*ширина только для наглядности - УДАЛИТЕ*/
  background: #f00; /*фон только для наглядности - УДАЛИТЕ*/
}
.content {
    position: absolute;
    background: #555;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}