Создание круглых div разных размеров с помощью CSS

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

Для формирования круга при помощи HTML и CSS оформите элементу div равные ширину и высоту и задайте свойство border-radius равное 50%.

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

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

В результате получим сплошной синий круг диаметром 100 пикселей.

Создание кругов различного диаметра с помощью CSS

Настройка стилей

Можно использовать несколько классов для создания кругов с различным диаметром. Это позволит масштабировать и переиспользовать код:

.small-circle { width: 50px; height: 50px; border-radius: 50%; background: skyblue; } /* Малый круг */
.medium-circle { width: 100px; height: 100px; border-radius: 50%; background: blue; } /* Средний круг */
.large-circle { width: 150px; height: 150px; border-radius: 50%; background: navy; } /* Большой круг */

После чего следует присвоить элементу в HTML соответствующий класс:

<div class="small-circle"></div> <!-- Малый круг -->
<div class="medium-circle"></div> <!-- Средний круг -->
<div class="large-circle"></div> <!-- Большой круг -->

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

Кроссбраузерность

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

.circle {
  width: 100px;
  height: 100px;
  -webkit-border-radius: 50%; /* для Apple */
  -moz-border-radius: 50%;    /* для Mozilla */
  border-radius: 50%;         /* стандартный синтаксис */
  background: blue;           /* синий цвет круга */
}

В отношении старых версий Internet Explorer обратите внимание на CSS3 PIE, позволяющий использовать свойства CSS3, включая border-radius.

Добавление деталей с помощью псевдоэлементов

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

.circle::before {
  content: '';
  width: 80px;
  height: 80px;
  border-radius: 50%; /* ещё один круг */
  background: white;
  position: absolute;
  top: 10px;
  left: 10px;
}

Свойство clip-path также может пригодиться для создания круглых форм.

Варианты визуализации кругов...

Интеграция кругов с текстом

Применяйте display: inline-block, чтобы расположить круги в одной строке с текстом:

.circle {
  display: inline-block; /* Теперь можно выстраивать круги в ряд */
  /* ...остальные стили... */
}

Добавление визуальных эффектов

Тень для круга создаётся при помощи box-shadow, а различные впечатляющие эффекты получаются благодаря filter:

.circle {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* мягкая тень */
  filter: brightness(1.2); /* увеличение яркости */
  /* ...остальные стили... */
}

Варьирование цвета

Украшайте круги с помощью градиентов, таких как linear-gradient или radial-gradient, для реализации более выразительных эффектов:

.circle {
  background: linear-gradient(to right, red, orange); /* окраска в оттенки заката */
  /* ...другие стили... */
}

На основе изображений: плюсы и минусы

Даже если круги, выполненные при помощи CSS, удобны для редактирования и легко стилизуются, стоит обдумать их применение в связи с более сложными потребностями дизайна и необходимостью в производительности по сравнению с использованием графических файлов.

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

1. Полный гид по Flexbox | CSS-Tricks — Обширное руководство по использованию Flexbox для построения макетов CSS.
2. border-radius – CSS: Каскадные таблицы стилей | MDN — Учебник по применению свойства border-radius для создания скругленных углов.
3. Создание кругов без изображений — Уроки по созданию круглых форм с помощью CSS.
4. Формы в CSS | CSS-Tricks — Справочник по созданию различных форм с применением CSS.
5. Свойство background в CSS — Применение свойства background в CSS для настройки ваших кругов.