Как сделать квадрат в css?
2 ответа
от
patrick.little ,
2 года назад
Делаем квадрат в 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 ,
год назад
@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%; } |
15