Как сделать кружок в css
Перейти к содержимому

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

  • автор:

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

enter image description here

Как мне нарисовать сектор? Учитывая степень X [0-360] я хочу нарисовать сектор в X градусов. Могу ли я сделать это с помощью чистого CSS? Например: Спасибо + Пример Спасибо Джонатану, я использовал первый метод. Если кому-то это поможет, вот пример функции JQuery, которая получает процент и рисует сектор. Сектор находится за процентным кругом, и этот пример показывает, как достичь дуги вокруг круга с начальной степени.

$(function drawSector() < var activeBorder = $("#activeBorder"); var prec = activeBorder.children().children().text(); if (prec >100) prec = 100; var deg = prec * 3.6; if (deg else < activeBorder.css('background-image', 'linear-gradient(' + (deg - 90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); >var startDeg = $("#startDeg").attr("class"); activeBorder.css('transform', 'rotate(' + startDeg + 'deg)'); $("#circle").css('transform', 'rotate(' + (-startDeg) + 'deg)'); >);
.container < width: 110px; height: 110px; margin: 100px auto; >.prec < top: 30px; position: relative; font-size: 30px; >.prec:after < content: '%'; >.circle < position: relative; top: 5px; left: 5px; text-align: center; width: 100px; height: 100px; border-radius: 100%; background-color: #E6F4F7; >.active-border

Демонстрация JSFiddle

$(function drawSector() < // Get degrees . // Draw a sector if (deg else < activeBorder.css('background-image', 'linear-gradient(' + (deg-90) + 'deg, transparent 50%, #39B4CC 50%), linear-gradient(90deg, #A2ECFB 50%, transparent 50%)'); >// Rotate to meet the start degree activeBorder.css('transform','rotate(' + startDeg + 'deg)'); >); 

Поделиться Источник 18 января 2014 в 14:50

15 ответов

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

enter image description here

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

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

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

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

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

enter image description here

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

Поделиться 18 января 2014 в 15:46

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

> Поворот transform

  1. Добавьте элемент с соотношением сторон 2:1 и overflow: hidden;
  2. Добавьте псевдоэлемент с верхним пограничным радиусом, равным высоте элемента, и нижним радиусом равным 0.
  3. Поместите transform-origin: 50% 100%; Это преобразует псевдоэлемент из его среднего дна.
  4. Transform: rotate(); псевдоэлемент с дополнением требуемого угла,
    т.е. ., transform: rotate(180 — rqrd. angle);

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

EG :
Сектор в 40 градусов с использованием этого метода : Fiddle

div < . overflow: hidden; . >div:before
div < height: 100px; width: 200px; overflow: hidden; position: relative; >div:before

Skew transform

Вы также можете поместить изображение внутрь сектора!

Это можно сделать с помощью преобразований skew на родительском элементе и -ve skew на псевдоэлементе :
Fiddle

div < . overflow: hidden; transform-origin: 0% 100%; transform: skew(-50deg); /*Complement of rqrd angle*/ . >div:before

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

div < height: 200px; width: 200px; overflow: hidden; -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: skew(-50deg); -moz-transform: skew(-50deg); -ms-transform: skew(-50deg); transform: skew(-50deg); /*Complement of rqrd angle or (90 - angle)*/ position: relative; >div:before < height: inherit; width: inherit; position: absolute; content: ""; border-radius: 0 200px 0 0; background: url('http://www.placekitten.com/g/300/200/'); -webkit-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: skew(50deg); -moz-transform: skew(50deg); -ms-transform: skew(50deg); transform: skew(50deg); >

Acknowledgements : Я не хочу быть самократелем, я использовал идеи, которые я использовал ранее здесь и здесь.

Поделиться 28 февраля 2015 в 16:04

.circle

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

Учитывая 4 квартала в круге, угол линейного градиента может быть вычислен в каждом квартале. И background-position определяет квартал:

Q I => 100% 0 Q II => 100% 100% Q III => 0 100% Q IV => 0 0 

Единственное, что остается, это откуда взялся используемый color-stop:

Рассмотрим 30-угольный кусок круга в 1-м квартале.

Как талантливая Ана Тюдор объяснила в своей великой статье, если мы возьмем длину ширины квадрата как a , то длина половины диагонали будет a*sqrt(2)/2 .

Если мы возьмем градиентную степень как g , то разница между двумя градиентными и диагональными углами будет d , то длина color-stop может быть вычислена с помощью:

a*sin(g) / (a*sqrt(2)/2 * cos(d)) = sin(g) / (sqrt(2) /2 * cos(d)) 

Таким образом, в этом случае у нас будет sin(30deg) / (sqrt(2)*cos((45-30deg)) = 0.3660 , а значение % для остановки цвета будет 36.60%

Поскольку наша форма находится в 1-м квартале, background-position равен 100% 0 .

и линейный градиент будет вот так:

linear-gradient(-30deg, orange 36.60%, transparent 36.60%) 100% 0; 
.circle

Я рекомендую прочитать статью Ana для получения более подробной информации.

Поделиться 18 января 2014 в 14:55

  1. Ваша необходимость нарисовать круг
  2. использовать clip-path для сокращения сектора (вам нужно сделать некоторую математику)

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

#skills < position: relative; width: 300px; height: 300px; margin: 30px auto; >.circle < width: 100%; height: 100%; border-radius: 50%; position: absolute; >.animate < -webkit-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -moz-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); -o-transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); transition: 0.2s cubic-bezier(.74,1.13,.83,1.2); >.animate:hover < transform: scale(1.1); transform-origin: center center; >#part1 < background-color: #E64C65; -webkit-clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0); clip-path: polygon(50% 0, 50% 50%, 100% 41.2%, 100% 0); >#part2 < background-color: #11A8AB; -webkit-clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%); clip-path: polygon(50% 50%, 100% 41.2%, 100% 100%, 63.4% 100%); >#part3 < background-color: #4FC4F6; -webkit-clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%); clip-path: polygon(50% 50%, 36.6% 100%, 63.4% 100%); >#part4 < background-color: #FFED0D; -webkit-clip-path: polygon(50% 50%, 0 100%, 36.6% 100%); clip-path: polygon(50% 50%, 0 100%, 36.6% 100%); >#part5 < background-color: #F46FDA; -webkit-clip-path: polygon(50% 50%, 0 36.6%, 0 100%); clip-path: polygon(50% 50%, 0 36.6%, 0 100%); >#part6

Поделиться 23 июля 2015 в 09:34

Обновление 2022: Я пишу чистый CSS и самое простое решение Conic Gradient

Попробуйте этот короткий код ниже:

 .piechart < display: block; width: 100px; height: 100px; border-radius: 50%; /* add sector degree here, multiple colors for muptiple sectors */ background-image: conic-gradient( pink 135deg, transparent 0); >

Примечание: Если вы хотите поддерживать его значением %, то вместо 135 градусов это просто как x * 360/100 или короче (x * 3.6) градус, где x является процентом

Поделиться 19 января 2022 в 12:13

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

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

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

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

schema

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

рисуйте сегменты круга с помощью css von c. Schaefer ist lizenziert unter der Creative Commons Namensnennung — Nicht kommerziell — Keine Bearbeitungen 4.0 International License.

  .circle< position: absolute; top: 100px; width: 600px; height: 600px; border-radius: 50%; background-color: #FFFF00; opacity: .9; -webkit-transform: rotate(45deg); 


Поделиться 07 июня 2015 в 14:39

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

CSS. Как построить круг вокруг цифры (без учета содержимого)?

Нужно создать круг вокруг цифры. Делаю это при помощи свойства border-radius: 50%. Обычно получался идеальный круг. Но сейчас больше напоминает овал. А все из-за того, что в кругах находятся цифры. Как добиться идеального круга? Понимаю, что нужно каким-то образом заставить игнорировать содержимое, но как?

Ищу простой способ.

59ec96d6b68d6291945904.png 59ec96ddce9c6749384582.png

  • Вопрос задан более трёх лет назад
  • 14360 просмотров

Как сделать такой круг на CSS?

Author24 — интернет-сервис помощи студентам

Как сделать вот такой макет через html и css (div и css)
Доброго времени суток.Подскажите как сделать по скрину ?* что бы было Лого на весь экран вот тот.

Как сделать такой шрифт средствами css?
как сделать такой шрифт средствами css?

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

Как сделать такой задний фон? (CSS)
Как сделать задний фон как на фото через css, то-есть, что бы цвет был голубым, но шли диагональные.

327 / 217 / 97
Регистрация: 04.11.2012
Сообщений: 638

Лучший ответ

Сообщение было отмечено StreetX как решение

Решение

StreetX, легко:

1 2 3
div class="block"> p>12 дней/p> /div>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
.block { width: 100px; height: 100px; background: #464342; border: 6px solid #0094D0; border-radius: 100%; border-top: 6px solid #423D3B; transform: rotate(-45deg); box-shadow: 0 0 1px #000 inset, 0 0 2px #fff inset, 0 0 1px #000; } p { transform: rotate(44deg); text-align: center; font: 28px Arial; margin: 14px 0 0 10px; color: #fff; }

Маркеры списка в CSS

Маркеры списка в CSS

В языке CSS есть возможность создавать маркерованные списки и есть возможность стилизовать маркеры, а также в качестве них добавлять определённые изображения.

Рассмотрим все основные маркеры.

Простые маркеры

В результате получим стандартные списки

  • Пункт 1
  • Пункт 2
  • Пункт 3

Маркер - картинка

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

ul li < list-style: none; background: url(assets/img/marker1.png) no-repeat left 50%; padding-left: 25px; >

И мы увидим, что вместо простых маркеров у нас используется картинка.

  • Пункт 1
  • Пункт 2
  • Пункт 3

Убрать маркеры списка через css

Чтобы полностью отключить маркеры у списков, добавьте к ним стиль css

ul li

И в результате мы не увидим маркеры

  • Пункт 1
  • Пункт 2
  • Пункт 3

Стандартные маркеры в css

Ниже показана таблица в которые вы можете увидить все маркеры, которые задать через язык CSS, а именно через стиль list-style

Маркер арабскими цифрами

Маркер со строчными римскими цифрами:

Маркер с заглавными римскими цифрами:

Маркер со строчными буквами латинского алфавита:

Мареер с заглавными буквами латинского алфавита:

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

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