Как сделать квадрат в css?

Пользователь

от helmer , в категории: HTML/CSS , год назад

Как сделать квадрат в css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от patrick.little , год назад

Делаем квадрат в CSS так:


Для HTML создаем:

1
2
3
<body>
    <div id="square"> </div>
</body>


Для CSS создаем:

1
2
3
4
5
#square {
    height: 100px;
    width: 100px;
    background: chocolate;
}



Пользователь

от stephon , 11 дней назад

@helmer 

Чтобы создать квадрат в CSS, вам необходимо задать равные значения ширины и высоты элементу. Например, следующий CSS код создаст квадрат со стороной 100px:

1
2
3
4
.square {
  width: 100px;
  height: 100px;
}


Вы так же можете использовать проценты или другие единицы измерения (например em или rem) для размеров квадрата.

1
2
3
4
.square {
  width: 10%;
  height: 10%;
}


1
2
3
4
.square {
  width: 1em;
  height: 1em;
}


Вы так же можете использовать псевдоэлемент ::before или ::after для создания кваддрата, и задать размер одной стороны и использовать padding-bottom, чтобы создать квадрат с динамическим размером.

1
2
3
4
5
.square::before {
  content: "";
  display: block;
  padding-bottom: 100%;
}