Как нарисовать круг в css

Как сделать элемент круглым на CSS

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

Слово1 да слово2 да слово3 да слово4

  
текст

Слово1 да слово2 да слово3 да слово4

  
текст

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

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

Слово1 да слово2 да слово3 да слово4

  
текст

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

Слово1 да слово2 да слово3 да слово4

  
текст

Можно нарисовать символ либо картинку в центре круга

  
текст

radial-gradient в background : круглый фон

Когда нужна круглая фоновая картинка.

Слово1 да слово2 да слово3 да слово4

  
текст

Слово1 да слово2 да слово3 да слово4

  
текст

radial-gradient в mask : наложить маску на HTML-элемент

Слово1 да слово2 да слово3 да слово4

  
текст

SVG в background : фоновое круглое изображение

То, что не поддаётся radial-gradient .

Слово1 да слово2 да слово3 да слово4

  
текст

• Полукруг CSS
• Надпись по кругу CSS
• Заполняющийся круг CSS
• Треугольник CSS

Нарисовать круг, используя только CSS

Ну раз уж в вопросе сказано «используя только CSS», то так и отвечу:

html < background: white; >body < width: 10em; /* поддерживаются любые единицы, в том числе проценты */ margin: 1em auto; background: silver; border-radius: 50%; >body::before

Отслеживать
ответ дан 17 мар 2017 в 9:12
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков

• Создайте div с одинаковым высотой и шириной, образуя тем самым квадрат (для круга используйте те же величины).
• Добавьте border-radius 50%, что сделает квадрат круглым по форме.
• Затем вы можете поиграть с фоном-цветом / градиентами / (даже с псевдоэлементами), чтобы создать что-то вроде этого:

.red < background-color: red; >.green < background-color: green; >.blue < background-color: blue; >.yellow < background-color: yellow; >.sphere < height: 200px; width: 200px; border-radius: 50%; text-align: center; vertical-align: middle; font-size: 500%; position: relative; box-shadow: inset -10px -10px 100px #000, 10px 10px 20px black, inset 0px 0px 10px black; display: inline-block; margin: 5%; >.sphere::after

Отслеживать
ответ дан 17 мар 2017 в 9:05
Alexandr_TT Alexandr_TT
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака
Просили круг а не сферу.
11 авг 2018 в 9:53

А мне понравился этот ответ, он единственный из всех поддерживает IE8-, поскольку не использует border-radius :

Вместо этого вставляется символ круга, с номером unicode 25СF :

.circle:before

Отслеживать
ответ дан 17 мар 2017 в 12:04
9,720 2 2 золотых знака 17 17 серебряных знаков 49 49 бронзовых знаков

А мне не понравился этот прием, потому что даже при 200px уже видны зазубрины изображения. Ловите плюс за труды.

17 мар 2017 в 12:51
Какие зазубрины? Вектор же. Можно добавить немножко text-shadow
17 мар 2017 в 13:07

@vp_arth вот не знал, что текст это вектор, спасибо, что просветили.Увеличите масштаб и увидите ступеньки, мне и так видно

17 мар 2017 в 13:09
Увеличил font-size до 500px, масштаб в браузере — до 500%. Никаких зазубрин.
17 мар 2017 в 13:13
Ну значит надо спросить кого-нибудь третьего 🙂
17 мар 2017 в 13:14

Думаю с кодом тут все понятно:

.circle

Отслеживать
122k 24 24 золотых знака 124 124 серебряных знака 299 299 бронзовых знаков
ответ дан 18 мар 2017 в 10:57
GrumpyCoder GrumpyCoder
180 8 8 бронзовых знаков

конечно с кодом всё понятно — это стандартный код для получения круга свойствами css/ Для поддержки нового пользователя ловите плюс

18 мар 2017 в 11:08

Вот миксин для создания круга

@mixin circle($width, $color) < width: $width; height: $width; background: $color; border-radius: $width/2; >.circle

Отслеживать
ответ дан 17 мар 2017 в 10:34
Trofimov Zhenya Trofimov Zhenya
307 1 1 серебряный знак 8 8 бронзовых знаков
Не могу найти информацию про миксины в стандарте CSS3, не поделитесь ссылкой?
18 мар 2017 в 8:49

@andreymal, а их там и нет. По крайней мере, не в этой форме. В стандарте есть @apply , который по сути тоже миксин.

18 мар 2017 в 11:42
Кстати, с процентами работать не будет.
18 мар 2017 в 11:50

Поищите инфу про препроцессоры — sass, scss или stylus, это чудесная штука, там есть переменные, функции, вложенность и еще куча классных штук. Если хотите совсем в тренде быть — заодно и про postcss почитайте. Оно позволяет проанализировать код и указывает на ошибки и проблемы несовместимости.

19 мар 2017 в 10:18

Ещё есть вариант с использованием кругового градиента:

.circle

Отслеживать
ответ дан 17 мар 2017 в 22:06
15.9k 8 8 золотых знаков 52 52 серебряных знака 99 99 бронзовых знаков

• html
• css
• html5
• css3

Важное на Мете

Связанные

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.11.15.1019

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Как нарисовать круг на HTML-странице?

Вы не можете нарисовать круг как таковой. Но вы можете сделать что-то идентичное кругу.

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

 #circle

ryanoshea 03 авг. 2011, в 06:45
Поделиться

Если подумать, вы можете вставить & nbsp; внутри этого

ryanoshea 03 авг. 2011, в 05:06

Я думаю, что этот ответ неверен, так как говорит, что вы не можете нарисовать круг в HTML5. Canvas — это элемент HTML5, и вы МОЖЕТЕ нарисовать круг в HTML5 ( w3schools.com/html/html5_canvas.asp )

jkj 02 июнь 2013, в 22:23

Таким образом, чтобы превратить div в круг, вы должны установить ширину и высоту некоторого размера , а радиус границы — половину ширины.

SIFE 08 июнь 2013, в 00:07

используйте -webkit-border-radius: 100%; -moz-border-radius: 100%; радиус границы: 100%; таким образом, вам нужно только настроить ширину и высоту, чтобы применить ваши изменения в будущем

Arkady 01 окт. 2013, в 12:30
Вы должны добавить границу, чтобы сделать ее видимой.
hakan 16 июнь 2014, в 08:59

Я нашел, используя border-radius: 50%; работал хорошо, измените размер по желанию. Для цвета вы можете использовать background-color или border .

Grimeh 07 янв. 2015, в 00:41
я использовал цвет фона, чтобы сделать его видимым
mokarakaya 18 май 2015, в 11:36
Показать ещё 5 комментариев

Это вполне возможно в HTML 5. Ваши варианты: Встроенный SVG и тег.

Чтобы нарисовать круг во встроенном SVG:

var canvas = document.getElementById("circlecanvas"); var context = canvas.getContext("2d"); context.arc(50, 50, 50, 0, Math.PI * 2, false); context.fillStyle = "red"; context.fill()

jkj 04 авг. 2011, в 06:23
Поделиться

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

Вы можете наложить текст на круги, если хотите:

#container < position: relative; >#circle < font-size: 50px; color: #58f; >#text

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

Alex 21 дек. 2014, в 08:22
Поделиться

border-radius:50% , если вы хотите, чтобы круг настраивался на любые размеры, которые получает контейнер (например, если текст является переменной длиной)

Не забывайте префиксы -moz- и -webkit- !

Lea Verou 03 авг. 2011, в 21:03
Поделиться
Вы должны убедиться, что ширина и высота равны, иначе это создаст овал.
Hp93 07 июнь 2016, в 07:45

С 2015 года вы можете сделать это и сосредоточить текст всего на 15 строк CSS (Fiddle):

body < background-color: #fff; >#circle < position: relative; background-color: #09f; margin: 20px auto; width: 400px; height: 400px; border-radius: 200px; >#text

       
Text in the circle
 
  

Без каких-либо -webkit- s это работает в IE11, Firefox, Chrome и Opera, на Windows7, и это действительно HTML5 (экспериментальный) и CSS3.

MattAllegro 29 июль 2015, в 19:54
Поделиться

Технически не существует способа рисовать круг с HTML (нет тега HTML), но можно нарисовать круг.

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

You can put text in here.
 

lachlanjc 12 окт. 2013, в 23:48
Поделиться

Вы можете использовать атрибут border-radius, чтобы придать ему радиус границы, эквивалентный граничному радиусу элемента. Например:

(Причина использования расширений -moz и -webkit заключается в поддержке предварительно-CSS3-окончательных версий Gecko и Webkit.)

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

Круги в CSS

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

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

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

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

border-radius

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

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

SVG

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

clip-path

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

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

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

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

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

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

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

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

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

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

С помощью HTML / CSS

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

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

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

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

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

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

С помощью SVG

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Заключение!

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

Автор: Tyler Sticka

Редакция: Команда webformyself.