Создание полукруга стилями CSS с одним div: обзор решений

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

Создайте полукруг с помощью div с контуром в форме полукруга. Воспользуйтесь свойством border-radius для округления формы и overflow: hidden; с целью скрыть нижнюю часть. Контур формируется при помощи псевдоэлемента ::before.

.half-circle {
  width: 100px; 
  height: 50px;
  overflow: hidden;
  border-radius: 100px 100px 0 0;
}

.half-circle::before {
  content: ''; 
  position: absolute;
  width: 100%; 
  height: 100%;
  border: 3px solid;
  border-bottom: none;
  border-radius: 100%;
}

Структура HTML:

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

Завершение

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

Размер и ширина контура

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

.half-circle {
  width: 120px; 
  height: 60px;
  border-top: 8px solid #333;
  border-left: 4px solid #333; 
  border-right: 4px solid #333;
}

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

Адаптивный дизайн

В эпоху множества различных устройств использование адаптивного дизайна становится критически важно. Процентные значения для border-radius и width, а также height, вычислямая через padding-top как полупроцент от ширины, сделают ваш полукруг адаптивным.

Совместимость с различными браузерами

Кроссбраузерность — частая головная боль для веб-разработчиков. При помощи вендорных префиксов возможно обеспечить правильное отображение полукруга в разных браузерах.

.half-circle {
  -webkit-border-top-left-radius: 100%; 
  -moz-border-radius-topleft: 100%;
  border-top-left-radius: 100%;
}

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

Процесс создания полукруга можно представить следующим образом:

🖌️: CSS свойство border выполняет функцию кисти
🎨: HTML элемент (например, <div>) служит холстом

Мы рисуем контур полукруга с помощью границ:

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

.half-circle {
  border-top-left-radius: 100%;
  border-top-right-radius: 100%;
  border: 5px solid black;
  border-bottom: 0;
}

В итоге получается полуокруглая форма, похожая на пиццу со съеденным куском:

🎨: 
 _____
/     \
|     |
|     |
‾‾‾‾‾‾

Нижняя граница закрыта, представляя собой прозрачное "тесто" пиццы!

Динамическое изменение ориентации и формы

Поворот полукруга

CSS позволяет создавать уникальные вращающиеся полукруги при помощи transform. Ваш полукруг может стать ярким элементом страницы, напоминая мяч для фрисби.

.half-circle {
  transform: rotate(45deg);
}

Эллиптические формы

Предпочитаете эллипсы? Измените радиусы для создания эллиптического полукруга, сохраняя высоту в два раза меньше ширины, чтобы создать нужную форму.

.half-circle {
  border-top-left-radius: 100% 200%;
  border-top-right-radius: 100% 200%;
}

Цвет и прозрачность

Экспериментируйте с цветом и прозрачностью границ, чтобы придать эстетическую привлекательность или создать эффекты, например, радугу.

.half-circle {
  border-color: transparent #000000 transparent transparent;
}

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

1. Формы на CSS | CSS-Tricks — здесь вы узнаете, как создавать самые разные формы при помощи CSS. Полукруги — это лишь часть этого многообразия.
2. border-radius – CSS | MDN — здесь подробнее рассказано об основах работы со свойством border-radius, которое ключевое для создания полукруглых контуров.
3. Отдельные функции CSS Transform | CSS-Tricks — материал о трансформациях для желающих добиться определенного поворота и ориентации полукруга.
4. "border-radius" на Can I use... — здесь можно узнать о совместимости свойства border-radius в различных браузерах.
5. Boxes with aspect ratio | CSS-Tricks — здесь вы научитесь создавать круглые формы с идеальным соотношением сторон и делать их адаптивными для разных размеров окон просмотра.