Создание круга в CSS: совместимое решение без JS и изображений

Быстрый ответ

Для создания идеального круга установите для элемента div равные значения ширины и высоты, а затем примените свойство border-radius: 50%. Включите фон, чтобы круг был видим:

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: red;
}

Внесите этот код в ваш HTML:

<div class="circle"></div>

Таким образом, вы получите красный круг диаметром в 50 пикселей. Меняя ширину, высоту и фон, вы сможете получить разнообразные визуальные эффекты.

Продвинутые приемы со CSS

CSS предлагает множество инструментов для того, чтобы ваш круг выглядел на экране максимально привлекательно. Рассмотрим некоторые из них:

Тень как аура круга

Применив свойство box-shadow, вы сможете придать кругу объемный вид:

.circle {
  /* ...остальные стилевые свойства... */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Подробнее об этом расскажет наш спикер на видео

Декорирование с использованием псевдоэлементов

Псевдоэлементы вроде :before или :after позволят добавить к кругу дополнительные формы или слои:

.circle:before {
  content: '';
  /* ...дополнительные стилевые свойства... */
  border-radius: 50%;
  z-index: 1;
}

Адаптивные размеры

Примените единицы измерения, такие как em, vw или %, вместо статичных пикселей, чтобы круг оставался корректно отмасштабированным на различных устройствах:

.circle {
  width: 10vw;
  height: 10vw;
  /* ...другие свойства... */
}

Визуализация

Правильное использование концепции формы и свойства border-radius играет важную роль при создании круга средствами CSS:

Представьте свой HTML-элемент в виде квадрата (🖼️):

🖼️: [🟥🟥🟥🟥]
    [🟥🟥🟥🟥]
    [🟥🟥🟥🟥]
    [🟥🟥🟥🟥]

Свойство 'border-radius' выступает здесь как волшебный инструмент:

🎨: { border-radius: 50%; }

Оно преобразует ваши действия и делает квадрат таким:

🎨 в процессе:
🟢🟢🟢🟢
🟢⚪⚪🟢
🟢⚪⚪🟢
🟢🟢🟢🟢

Углы квадрата становятся скруглёнными, и в итоге мы видим круг (⚪) внутри прямоугольника (🟢).

Поддержка кроссбраузерности

Присутствие правильного отображения CSS-кругов во всех браузерах — это ключ к доступности дизайна:

Поддержка старых браузеров

Добавьте префиксы -moz- и -webkit-, чтобы обеспечить совместимость со старыми версиями Firefox и Safari:

.circle {
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}

Резервный план для устаревших версий IE

Для IE8 и более старых версий можно использовать псевдоэлемент :before и код символа Unicode (●):

.circle:before {
  content: "\25CF";
  font-size: 50px;
  line-height: 50px;
}

Альтернатива: использование символьных HTML-кодов

Символ • можно использовать в случае, когда вам необходим минимум CSS:

<span>&#8226;</span>

Стлизовать такой символ можно с помощью свойств font-size и color, что позволит создать простой круг.

Полезные материалы

1. Формы в CSS – CSS | MDN — подробное руководство по формам в CSS.
2. Фигуры CSS | CSS-Tricks — информация о создании различных форм используя чистый CSS.
3. Как создать круг | W3Schools — полезное пошаговое руководство по созданию идеальных кругов c использованием CSS.
4. border-radius | CSS-Tricks — полное руководство по использованию свойства border-radius.
5. Свойство border-radius в CSS | W3Schools — детальное пособие от W3Schools, посвященное использованию border-radius.
6. Анимация форм CSS | CSS-Tricks — обсуждения на форуме, посвященном анимации форм с помощью CSS.
7. Введение в анимацию CSS для начинающих | Envato Tuts+ — курс по анимации с использованием CSS для начинающих.