Мне интересно, есть ли более простой способ создания круговых элементов, чем то, что я делаю сейчас.
В настоящее время я просто делаю изображения для каждого размера, но это раздражает.
Есть ли в любом случае использование CSS для создания div, которые являются круглыми, и я могу указать радиус?
html
css
geometry
css-shapes
BMASTER
источник
источник
Ответы:
Вот демо: http://jsfiddle.net/thirtydot/JJytE/1170/
CSS:
HTML:
Чтобы это работало в IE8 и старше , вы должны загрузить и использовать CSS3 PIE . Моя демонстрация выше не будет работать в IE8, но это только потому, что jsFiddle не размещается
PIE.htc
.Моя демка выглядит так:
источник
div
на вашей странице есть круглая, которые вы можете увидеть , если добавить, например ,border: 5px solid red
к нему. Проблема в том, что части изображения, «нависающие над кругом», не скрыты. Ни один из обычных обходных путей не особенно прост в применении здесь. Я предлагаю использовать это-webkit-mask-image
свойство для исправления браузеров WebKit (и сохранитьborder-radius
, для других браузеров). Более подробная информация здесь: webkit.org/blog/181/css-masks . Вы также можете задать вопрос здесь о переполнении стека, чтобы узнать, есть ли у кого-нибудь еще какие-либо идеи.Если установить радиус границы каждой стороны элемента равным 50%, изображение круга будет иметь любой размер:
источник
Попробуй это
источник
Это на самом деле возможно.
См. CSS Совет: Как сделать круги без изображений . Смотрите демо .
Но будьте осторожны, это имеет серьезные недостатки с точки зрения совместимости, в основном, вы делаете лай кошки.
Посмотрите, как это работает здесь
Как вы увидите, вам просто нужно настроить
height
иwidth
половинуborder-radius
Удачи!
источник
jsfiddle
ссылку! Эта ссылка пока единственная из ваших ответов. ;)Также есть [плохая идея] использовать несколько (20+) горизонтальных или вертикальных 1px div для построения круга. Этот плагин jQuery использует этот метод для создания различных форм.
источник
Приведите ширину и высоту в зависимости от размера, но сохраняйте оба равными
источник
border-radius: 50%;
достаточно.Просто хотел бы упомянуть другое решение, которое отвечает на вопрос «Более простой способ создать круг Div, чем с помощью изображения?» который должен использовать FontAwesome.
Вы импортируете замечательный файл CSS или из CDN здесь
а потом ты просто
и вы можете дать ему любой цвет, который вы хотите любой размер шрифта.
источник
Вы можете попробовать
radial-gradient
функцию CSS:Примените это к
div
слою:источник
Допустим, у вас есть это изображение:
чтобы сделать из этого круг, нужно только добавить
Так что если у вас есть div, вы можете сделать то же самое.
Проверьте пример ниже:
источник
Вы можете использовать радиус , но он не будет работать на IE:
border-radius: 5px 5px;
.источник
источник
в основном это использует абсолютную позицию div для размещения символа в заданных координатах. поэтому, используя параметрическое уравнение для круга, вы можете нарисовать круг. если вы измените положение div на относительное, это приведет к синусоиде ...
по сути, мы рисуем уравнения, злоупотребляя свойством позиции. я не очень хорошо разбираюсь в css, так что кто-то наверняка может сделать это более элегантным. наслаждаться.
это работает на всех браузерах и мобильных устройствах (о которых я знаю). Я использую его на своем веб-сайте для рисования синусоидальных волн текста (www.cpixel.com). оригинальный источник этого кода находится здесь: www.mathopenref.com/coordcirclealgorithm.html
источник
Добавление
css
свойства:border-radius: 50%;
любой div делает его круглым.
источник
Для круга создайте элемент div, а затем введите width = 2 раза радиуса границы = 2 раза отступ. Также line-height = 0 Например, с радиусами круга 50px, приведенный ниже код работает хорошо:
источник