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

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

Как рисовать сектор? Учитывая степень X [0-360], я хочу нарисовать сектор X градусов. Могу ли я сделать это с помощью чистого CSS?

enter image description here

Спасибо + Пример

Спасибо, Джонатан, я использовал первый метод. Если это помогает кому-то здесь привести пример функции JQuery, которая получает процент и привлекает сектор. Этот сектор находится за процентным кругом, и этот пример показывает, как достичь дуги вокруг круга с начала.

ОТВЕТЫ

Ответ 1

CSS и несколько фоновых градиентов

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

Ответ 2

Это очень хорошо, если использовать свойства overflow и transform без необходимости выполнять сложные вычисления.

> Поверните преобразование

Для углов менее 180deg

Добавьте элемент с соотношением сторон 2: 1 и overflow: hidden;

Добавьте псевдоэлемент с верхними пограничными радиусами, такими же, как высота элемента и нижние радиусы как 0.

Положите transform-origin: 50% 100%; Это преобразует псевдоэлемент из его среднего дна.

Трансформация: rotate(); псевдоэлемент, дополняющий требуемый угол,
i.e., transform: rotate(180 — rqrd. angle);

Посмотрите, как это работает:

EG:
Сектор 40deg, используя этот метод: Fiddle

Ответ 3
Ответ 4

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

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

мои решения работают с сеткой из четырех полигонов, каждая из которых обеспечивает возможную начальную или конечную точку для значений 0-90 ° или. 0-100%, 90-180 ° соответственно. 0-100% и т.д., Разделяя центральную точку и, следовательно, есть два раза четыре сегмента. вы можете думать о механике как о стержне телескопа с несколькими сегментами, каждый из которых выполняет свою сегментированную работу от 0 до N. из-за механики, сохраняя при этом некоторую ясность в коде (0-90,90-180..), я пришлось вручную вращать (-45deg) div, так что 0 ° == 12 ».

вот небольшой эскиз, который может показать, как я это сделал:

schema

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

рисование круговых сегментов с использованием css von c. schaefer ist lizenziert unter einer Creative Commons Namensnennung — Nicht kommerziell — Keine Bearbeitungen 4.0 Международный Лизенц.

Ответ 5
  • Вам нужно нарисовать круг
  • используйте clip-path для сокращения сектора (вам нужно сделать некоторую математику)

вы можете играть с clip-path здесь

вот демонстрационная версия:

Ответ 6

У меня есть другое решение.

Ответ 7

См. это, чтобы получить представление о том, как решить вашу проблему.

Ответ 8

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

Ответ 9

Так как я нуждался в этом динамически, вот маленький плагин jQuery. например вызовите $(‘selector’).pieChart(0.4, ‘white’ ‘green’) , чтобы показать 40% зеленый сегмент на белом круге.

Ответ 10

Вы можете использовать круг с пунктирной линией.

  • Сделайте линию в два раза толще радиуса круга, чтобы она достигла центра круга.
  • Поиграйте со значением stroke-dasharray , чтобы определить, какой размер пирога вы хотите видеть.

Бонус: Преимущество использования круга вместо пути состоит в том, что вы можете легко анимировать его при изменении размера пирога: просто добавьте что-то вроде transition: stroke-dasharray .5s; к CSS круга.

Ответ 11

У меня есть несколько иной подход, который можно легко анимировать без использования SVG.

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

Обратите внимание, что полный полукруг должен быть добавлен, если пирог заполнен более чем на 50% ( > 180 град окрашено). Эта часть должна обрабатываться динамически в JS, если вы ее анимируете.

Вот скрипка для демонстрации — это намного проще, чем объяснение в письменной форме:

Ответ 12

Simple. Просто следуйте приведенному ниже коду:

Ответ 13

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

Как это работает, он проверяет процент и на основе предварительно рассчитанных точек останова генерирует многоangularьник, чтобы разрезать квадрат. Радиус границы превращает его в отрезок круга.

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

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

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

вполне возможно HTML 5. Ваши варианты: встроенный SVG и <canvas> tag.

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

есть несколько кругов unicode, которые вы можете использовать:

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

не забудьте -moz- и -webkit- префиксы!

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

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

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

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

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

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

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

вы можете использовать свойство border-radius или сделать div с фиксированной высотой и шириной и фоном с кругом png.

Как сделать круг вокруг контента с помощью CSS?

circle around content

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

Это решение всегда отображает круг независимо от длины содержимого.

Но если вам нужен эллипс, который расширяется вместе с содержимым, то http://jsfiddle.net/MafjT/256/

Изменение размера с контентом — Улучшение

В этом https://jsfiddle.net/36m7796q/2/ вы можете увидеть, как визуализировать круг, который реагирует на изменение длины контента.
Вы даже можете редактировать содержимое последнего круга, чтобы увидеть, как изменяется диаметр.

У вас сейчас много ответов, но я постараюсь рассказать вам основы.

Первый элемент — встроенный элемент, поэтому, отделяя его от верхнего края, мы должны преобразовать его в блочный элемент. Я преобразовал в встроенный блок, потому что он близок к встроенному и имеет особенности элементов блока.

Во-вторых, вам нужно задать отступ справа и слева больше, чем сверху и снизу, потому что сами цифры растягиваются сверху вниз, так что они получают разумную высоту, НО, поскольку мы хотим сделать интервал КРУГЛЫМ, чтобы мы дали им отступы слева и справа, чтобы освободить место для границы радиуса.

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *