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

Пустому div задайте width: 120px; height: 120px; background: teal;. Равные стороны дают квадрат. При наличии отступов и рамки добавьте box-sizing: border-box.

Самый прямой вариант для учебного задания: добавьте в HTML <div class="square"></div>, а в CSS напишите .square { width: 120px; height: 120px; background: teal; box-sizing: border-box; }. Такой элемент имеет одинаковые стороны и видимый фон, изображение для него не требуется. Если фон не задан и внутри нет содержимого, место под квадрат может существовать, но на странице вы его не заметите. Значения ширины и высоты действуют на div в обычном блочном потоке; для обычного строчного span сначала понадобится подходящий display. Когда добавляете рамку или внутренние отступы, сохраняйте одинаковые внешние размеры: border-box включает эти части в заданную ширину и высоту. Для гибкого квадрата вместо фиксированной высоты можно использовать aspect-ratio: 1 вместе с нужной шириной и автоматической высотой. Например, ширина сто процентов с ограничением max-width позволит фигуре уменьшаться вместе с родителем. Не задавайте одновременно несовместимые фиксированные ширину и высоту, ожидая, что aspect-ratio их исправит. Проверьте контекст размещения: flex может сжимать элемент, а ограничения min-width и max-width способны менять итоговый размер. Если квадрат служит только декором, оставьте его пустым и не добавляйте внутрь невидимый текст ради высоты. Если внутри позже появится полезная надпись, решите, должен ли контейнер сохранять строгую форму или увеличиваться ради содержимого. Принудительное скрытие переполнения может обрезать слова, поэтому для текстовой карточки это уже отдельное решение.