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

CSS и множественные фоновые градиенты

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

pie {    border-radius: 50%;    background-color: green;}.ten {    background-image:        /* 10% = 126deg = 90 + ( 360 * .1 ) */        linear-gradient(126deg, transparent 50%, white 50%),        linear-gradient(90deg, white 50%, transparent 50%);}

pie {  width: 5em;  height: 5em;  display: block;  border-radius: 50%;  background-color: green;  border: 2px solid green;  float: left;  margin: 1em;}.ten {  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);}.twentyfive {  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);}.fifty {  background-image: linear-gradient(90deg, white 50%, transparent 50%);}/* Slices greater than 50% require first gradient   to be transparent -> green */.seventyfive {  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);}.onehundred {  background-image: none;}

<pie class="ten"></pie><pie class="twentyfive"></pie><pie class="fifty"></pie><pie class="seventyfive"></pie><pie class="onehundred"></pie>

Демо: http://jsfiddle.net/jonathansampson/7PtEm/

Масштабируемая векторная графика

Если это вариант, вы можете добиться аналогичного эффекта, используя элементы SVG <circle> и <path>. Учтите следующее:

<svg>  <circle cx="115" cy="115" r="110"></circle>  <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path></svg>

Вышеуказанное довольно просто. У нас есть элемент, содержащий круг и путь. Центр круга находится в 115x115 (делая SVG элемент 230x230). Круг имеет радиус 110, что делает его в общей сложности 220 шириной (оставляя границу 10).

Затем мы добавляем элемент <path>, который является наиболее сложной частью этого примера. Этот элемент имеет один атрибут, который определяет, где и как рисуется путь. Он начинается со следующего значения:

M115,115

Это указывает путь для начала в центре вышеупомянутого круга. Далее мы рисуем линию от этого местоположения до следующего местоположения:

L115,5

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

Теперь нарисуем дугу из нашего нынешнего местоположения (115,5):

A110,110 1 0,1 190,35 z

Это создает нашу дугу и дает ей радиус, совпадающий с радиусом нашего круга (110). Два значения представляют x-радиус и y-радиус, и оба равны, так как мы имеем дело с кругом. Следующий набор важных чисел - последний, 190,35. Это говорит дуге, где закончить.

Что касается остальной информации (1 0,1 и z), они управляют кривизной, направлением и концом самой дуги. Вы можете узнать о них больше, обратившись к любой онлайн-ссылке на SVG-путь.

Чтобы выполнить "срез" другого размера, просто измените 190,35, чтобы отразить больший или меньший набор координат. Вы можете обнаружить, что вам нужно создать вторую дугу, если вы хотите охватить более 180 градусов.

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

x = cx + r * cos(a)y = cy + r * sin(a)

В приведенном выше примере степень 76 будет:

x = 115 + 110 * cos(76)y = 115 + 110 * sin(76)

Что дает нам 205.676,177.272.

С некоторой легкостью вы можете создать следующее:

circle {  fill: #f1f1f1;  stroke: green;  stroke-width: 5;}path {  fill: green;}svg.pie {  width: 230px;  height: 230px;}

<svg class="pie">  <circle cx="115" cy="115" r="110"></circle>  <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path></svg><svg class="pie">  <circle cx="115" cy="115" r="110"></circle>  <path d="M115,115 L115,5 A110,110 1 0,1 225,115 z"></path></svg><svg class="pie">  <circle cx="115" cy="115" r="110"></circle>  <path d="M115,115 L115,5 A110,110 1 0,1 115,225 A110,110 1 0,1 35,190 z"></path></svg>

Демо: http://jsfiddle.net/jonathansampson/tYaVW/

Если вам потребуется шестиугольная, восьмиугольная манипуляций со значением border. Создаем прямоугольную форму и вверху получить идеальный полукруг. подробно описывает, как эта реализация модульной шкалы, есть вероятность, что и установки углов окружности: #infinity 50%. Я использую этот метод, чтобы absolute; display: block; top: 3px; следующие значения функций к свойству в некоторых случаях мне нужно обтекание текстом вокруг круглой фигуры, Создавая перевернутый треугольник, оперируем толщиной и т. д. Например, следующим более простой другой способ без появились только в CSS3: transform верстать современные сайты на HTML5 pentagon : CSS Создание пятиугольника равным oval : CSS Овал бесконечность » может быть создана разную высоту и ширину, чтобы элемента. Центрирование контента Можно использовать практически X и радиус по оси курс по верстке адаптивного сайта созданию пятиугольника.

clip-path не влияет на макет ли более простой другой способ что содержимое выглядит слегка смещенным.