Как сделать круг в css: Круг | CSS примеры

Как Сделать Окружность В CSS

Круги могут быть полезны для кнопок CTA, или вам может понадобиться круглая форма изображения, чтобы имитировать ваш логотип.

Какими бы ни были ваши потребности, вы можете легко создать круг в CSS.

Создание Круга В CSS

Сделать Круглую Кнопку В CSS

Сделать Круглое Изображение В CSS

FAQ

Важное раскрытие информации: мы являемся гордыми партнерами некоторых инструментов, упомянутых в этом руководстве. Если вы перейдете по партнерской ссылке и впоследствии совершите покупку, мы получим небольшую комиссию без дополнительных затрат с вашей стороны (вы ничего не платите дополнительно). Для получения дополнительной информации ознакомьтесь с нашим раскрытием информации о партнерах.

Make A Circle In CSS

Чтобы сделать круг в CSS, можно использовать свойство border-radius для закругления углов элемента и установить свойства width и height в одинаковое значение.

Код будет выглядеть следующим образом:

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

Здесь создается <div> с классом .circle и устанавливается для формирования круглой формы с синим фоном.

Сделать Круглую Кнопку В CSS

Чтобы создать круглую кнопку в CSS, нужно установить ширину и высоту HTML элемента на одинаковое значение и применить свойство border-radius (установленное на 50% от ширины/высоты).

Вот как будет выглядеть код:

.circle-button {
width: 50px;
height: 50px;
border-radius: 25px;
background-color: #4CAF50;
color: white;
text-align: center;
line-height: 50px;
}

👉 Вы можете настроить любое из значений, чтобы получить правильный внешний вид для вашего сайта.

Сделать Круглое Изображение В CSS

Вы можете создать круглое изображение в CSS, установив свойство border-radius со значением 50% элемента изображения.

.circle-image {
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
<img src="your-image-source" alt="Circular Image">

🔔

Примечание: Свойство переполнения имеет значение ‘hidden’, чтобы скрыть части изображения, выходящие за границы круга.

FAQ

Как добавить текст в круг в CSS?
Вы можете добавить текст в круг, указав свойство высоты линии.

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid black;
text-align: center;
line-height: 100px;
}
<div>Text</div>

Как сделать круг отзывчивым в CSS?
С помощью процентных значений для свойств width, height и border-radius.

.circle {
width: 20%;
height: 0;
padding-bottom: 20%;
border-radius: 50%;
border: 2px solid black;
}

Как сделать круг с границей в CSS?
Добавив свойство border к кругу и задав ему значение и цвет.

. circle {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid black;
}

Как изменить цвет круга?

Установив свойство background-color элемента, который представляет круг.

.circle {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #4CAF50;
}

Хотите Узнать Больше О CSS? Попробуйте Этот Курс 🙌

The link has been copied!

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

Рекомендую этот хостинг в Украине. Всё очень доступно, цены низкие, и лояльная тех поддержка.

Здравствуйте, дорогие читатели блога. Сегодня хочется рассказать Вам как сделать самые обычные круги только при помощи CSS стилей. Я вот начал замечать, что всё чаще в построении шаблонов используют именно этот способ. Получается весьма интересно, тем более если добавлены самые разные эффекты. А так же огромным плюсом является то, что данные круги значительно быстрее загружаются чем тоже изображение.

В общем давайте, непосредственно, перейдём к практике, но для начала давайте рассмотрим некоторые важные моменты.

Важные моменты

Во всех случаях мы будем использовать следующее:

-webkit-border-radius — для правильного отображения в браузерах таких как Chrome и Safari.

-moz-border-radius — для правильного отображения кругов в браузере Firefox.

Хотелось бы сказать, что на данный момент почти все, с последним обновлением, браузеры поддерживают технологию CSS3, а также свойство border-radius (стандартное свойство для всех браузеров, которые поддерживают CSS3). Но лучше будем, так сказать, страховаться, потому что не все пользователи обновляются вовремя, или же вообще не обновляются и пользуются старыми версиями браузеров.

С помощью свойства border-radius можно делать любые круги любого размера, главное правильно подбирать радиус углов в пикселах, например, чем больше круг тем больше должен быть радиус углов, чтобы получился сам круг, если радиус будет не достаточно велик, то скорее всего получится не круг, а квадрат с загругленными углами.

Ну а теперь практика.

Круг с текстом внутри

Чтобы вставить круг в то место где Вы хотите, нужно просто добавить следующее:

И круг отобразится. Ух как всё просто 🙂

Чтобы получился такой круг с ссылкой нужно к коду ссылки присвоить класс:

Это свойство позволяет нам менять цвет при наведении.
Привет

Ну а здесь Вы сможете добавить разные стили на Ваше усмотрение, например тень или бордюр. Вот, что у меня получилось:
Привет

Как видите, в принципе, здесь ничего сложного нет, главное понять что за что отвечает и экспериментировать, и тогда всё обязательно получится.

Обычный круг

Овал

Полукруг

Обрезанный круг

Вот и всё, дорогие друзья. Надеюсь с этой статьи Вы что нибудь узнали для себя новое и полезное. И прошу Вас если что то будет не понятно обязательно спрашивайте в комментариях. До скорых встреч.

Иногда, при создании адаптивных сайтов, возникает необходимость придать адаптивности круглым блокам. С изображениями проблем, конечно же не возникает. Но блоки… Особенно, если внутри есть какой-то контент. А если вы не знаете сколько и какой контент будет внутри, то это становится настоящей головной болью. Обычно большинство прибегает к помощи javascript. Вычисляют ширину, присваивают высоту. Но на самом деле с помощью небольшого трюка можно легко сделать круги адаптивными на CSS. Сейчас я расскажу как.

Для начала рассмотрим html-структуру:

Что же нам нужно сделать? Оформим блоки стилями:

Теперь основное: дочернему элементу указываем высоту в ноль пикселей, а саму высоту формируем padding-ом:

От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.

Но я открою вам секрет: в этом нет ничего сложного. К концу этой статьи я думаю, что вы тоже будете экспертом.

Создание кругов

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

border-radius

Самая распространенная техника — это скруглить все углы на 50%. Это самый простой способ, и он широко поддерживается. Свойство border-radius также будет влиять на обводки, тени и целевой размер касания / клика элемента.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Если вы хотите, чтобы круг растягивался до формы таблетки, установите для border-radius половину высоты элемента вместо 50%. Если высота неизвестна, выберите произвольно большое значение (например, 99em).

SVG может включать в себя элемент <circle/>, который может быть стилизован аналогично любому другому контуру. Они очень хорошо поддерживаются и производительны для анимации, но требуют больше разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина ширины его обводки, если есть) немного меньше viewBox SVG.

clip-path

Это новая техника. Ее поддержка вполне достойная, но менее последовательная. clip-path не влияет на макет элемента, что означает, что оно влияет на обводку и, скорее всего, будет скрывать внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.

Радиальный градиент

Мы можем использовать background-image и radial-gradient, чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его расположение (включая целевой размер касания / клика) не будет затронуто. Это мой наименее любимый метод, потому что края круга могут казаться неровными или нечеткими в зависимости от браузера, но это может хорошо подходить для тонких фоновых деталей.

Центрирование контента

Можно использовать практически любой метод для центрирования вещей с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит слегка смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему еще более заметной.

Сравнение методов центрирования для элементов разных размеров в Safari. Обратите внимание, что некоторые методы имеют более заметный джиттер в положении значка относительно его контейнера.

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

По моему опыту, самый гибкий метод для центрирования — использовать комбинацию абсолютного позиционирования (чтобы установить центральную точку на основе расположения родительского элемента) и преобразования (чтобы поместить дочерний элемент с помощью относительных вычислений):

Обрезка содержимого

Центрирование это хорошо, но что, если мы хотим заполнить круг изображением?

С помощью HTML / CSS

Мы можем обрезать элемент img до круга, используя border-radius:

Это имеет некоторые ограничения:

Элемент не адаптируется к своему контейнеру.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Мы не можем применить какие-либо внутренние тени, чтобы как-то отделить изображение от фона (кроме как в самом изображении).

Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.

Вот более сложный пример. В нем используется элемент-оболочка, чтобы установить соотношения сторон блока для поддержания квадратных пропорций, в нем улучшается обработка неквадратных изображений с помощью @supports и применяется прозрачная внутренняя тень, чтобы отделить изображение от фона:

С помощью SVG

Мы можем сделать то же самое, используя SVG:

Но поскольку элементы SVG image не поддерживают srcset или sizes, это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.

Субпиксельные промежутки

Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить, что появляются некоторые субпиксельные артефакты:

Светлые пиксели вдоль края, где фон выходит за внутреннюю границу.

К сожалению, я не нашел решения этой проблемы. Кажется, это происходит независимо от техники, используемой для рисования границы или отображения изображения, и это имеет место в некоторой степени в каждом браузере.
Если вы найдете способ наложения круговых эффектов без этих артефактов, пожалуйста, дайте мне знать в комментариях!

Обтекание текстом

Текст! Это основа Интернета. Он заполняет прямоугольники и разбивается на строки. Что мы можем сделать с этим?

Внешний текст

Вы можете задать обтекание текстом вокруг круглой фигуры, используя свойство shape-outside:

Внутренний текст

Стоп! Это, наверное, плохая идея! Сделать его адаптивным практически невозможно! Просто подождите, пока у нас не будет свойства shape-inside!

Точно? Хорошо, хорошо, у Джонатана Скита есть интеллектуальный хак. Он использует псевдо-элементы для установки shape-outside по обе стороны от текста:

Вдоль контура

Мы можем установить текст по изогнутому контуру с помощью SVG и <textPath>:

К сожалению, <circle> поддерживается для <textPath> не во всех браузерах, но преобразование в <path> не слишком сложное.

Заключение!

Вот и все! Вы прочитали длинную статью о действительно важной теме, прошли по ее минным полям с вложенными заголовками и повторяющимися демонстрациями и обрели знание о кругах в качестве единственной награды! Продолжайте в том же духе, отважный читатель! Я верю в вас!

Содержимое, выходящее за границы контура в clip-path , невидно.

shape-inside : текст в круге

Текст выравнен так, что крайние слова не выходят за границу, обозначенную в shape-inside . Но на момент написания статьи нет поддержки браузерами.

Можно установить безопасный отступ, зная формулу, позволяющую найти сторону квадрата через радиус описанной окружности: a = 2R : √ 2

Овал в результате радиуса границы: 100% — CSS FAQ

axelkaban 28 сентября 2018 г., 22:18 1

Вопрос

почему установка радиуса границы #banner .content h2 на 100% дает мне овал, а не круг?

Ответ

Наличие 100% на радиусе границы должно дать вам идеальный круг, это правильно, только если высота и ширина элемента одинаковы. То есть вам нужно, чтобы квадратный элемент имел круглую границу. Кроме того, если ваш элемент не имеет определенных размеров, он зависит от размера контейнера и его собственного содержимого, и поэтому вам нужно будет настроить его размеры, если ваша цель — получить круглую границу.

29 лайков

2 сентября 2019 г., 4:38 2

Отличный ответ! Спасибо.

4 лайка

текст5695674026 25 октября 2019 г., 14:43 3

Установка радиуса границы на 50% достаточна для получения овала.

4 лайка

объект8774281833 15 февраля 2020 г.

, 13:41 4

Спасибо за информацию братан.

шафи.alvi99 30 апреля 2020 г., 16:15 5

Спасибо за ответ.

Я немного не понимаю, почему содержимое выходит за границы? Разве содержимое не должно быть внутри границы, поскольку граница окружает область содержимого (в случае отсутствия отступов)?

2 лайка

байт0922555261 10 мая 2020 г., 12:01

6

, потому что по умолчанию для свойства переполнения установлено значение «видимый», и поэтому содержимое видно за пределами границы
. Но если вы установите для свойства переполнения значение «скрыто/прокрутить»… в пределах границ элемента

7 лайков

разработчик2672290954 19 мая 2020 г. , 12:07

8

Capture d’écran 19.05.2020 à 14.03.11812×956 562 КБ

Здравствуйте, спасибо за ответ, но все равно текст не очень видно. Как я могу поместить текст в центр этого круга? Пробую с text-alight и margin-top, но весь блок меняет место, а не только текст внутри.
Спасибо!

5 лайков

разработчик2672290954 19 мая 2020 г., 12:20 9

Мне нужно добавить:
#banner .content h2
{
display: flex;
элементы выравнивания: по центру;

}

13 отметок «Нравится»

15 июля 2020 г., 13:02 10

Здравствуйте!

Можно спросить и заинтересовать?
Почему, когда я пытаюсь создать радиус границы в моем поле границы здесь (в селекторе #banner . content h2) и хочу создать радиус границы круга, создается только овал? Я пытаюсь, поскольку он говорит, что радиус границы должен быть таким же, как ширина и высота вашего поля границы. Попробуйте также установить даже 100% (не только в пикселях). Что я могу сделать не так?

Большое спасибо

самядель 28 августа 2020 г., 19:35 11

Чтобы граница элемента была идеальной окружностью, не только его свойство border-radius должно быть установлено на 50% (да, этого достаточно, нет необходимости в 100% ), но и ширина и высота свойства этого элемента должны быть одинаковыми. Это означает, что если мы не изменили border-radius этого элемента, граница должна получиться в виде идеального квадрата

4 лайков

27 ноября 2020 г. , 19:35 12

Как объяснить значение радиуса границы 50%/30%/100%…?

Макивелли 28 января 2021 г., 2:35 13

вы также можете просто добавить верхнюю прокладку

брызгалки 9 марта 2021 г., 8:21 14

Как бы вы разделили изменения размера шрифта и границы? У меня есть идеальный круг, но размер шрифта немного велик, и я хотел бы, чтобы он помещался внутри моего круга. Однако, когда я меняю размер шрифта, размер границы также меняется. Я просматриваю код, чтобы увидеть, чего мне не хватает, но я все еще немного зеленый с этим материалом

Возни с line-height, padding и прочим, кажется, приблизили меня к моей цели, но не совсем.

Кажется, должно быть какое-то свойство обертывания для содержимого внутри рамки, но я полагаю, что это не так просто.

самядель 21 апреля 2021 г., 16:31 15

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

3 нравится

над.чел. 16 февраля 2023 г., 10:47 16

Правильно ли я понимаю, что превышение 50% ничего не изменит?

хавьерваргас97 7 марта 2023 г. , 2:31 17

Спасибо! это очень помогает.

Рисование дуги прогресса в чистом CSS с использованием наклонных прямоугольников

Рисование круглых фигур в CSS сложно, поскольку единственный способ сделать это — использовать border-radius: 50% , что только доходит до вас — в частности когда вы пытаетесь рисовать дуги. Заманчиво прибегнуть к SVG, но это влечет за собой хитрости с масштабированием, которых можно избежать, придерживаясь чистого HTML. В этом уроке мы покажем вам, как нарисовать круговую дугу прогресса, используя перекос преобразований.

Что мы собираемся сделать

Обрезной круг

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

См. ручку на CodePen.

Сегмент

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

См. ручку на CodePen.

Интересно, что этого прямоугольника достаточно, чтобы нарисовать сегмент размером от 0° до 90°. Мы можем применить к нему преобразование skew , чтобы сжать его с 90° (без перекоса) до 0° (с перекосом в прямую). Конечно, один сегмент не более 90° недостаточно для представления полного круга, но мы можем просто создать четыре копии этого прямоугольника и повернуть их так, чтобы мы могли покрыть 360°. Вот несколько прямоугольников в разных положениях и с разной степенью перекоса:

См. перо на CodePen.

С четырьмя копиями прямоугольника, повернутыми на 0°, 90°, 180° и 270°, мы можем покрыть полный круг. Таким образом, мы можем установить их степени наклона индивидуально и нарисовать любую дугу от 0° до 360°

См. перо на CodePen.

Внутренний круг

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

См.