Как сделать элемент круглым на 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
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
- Создайте 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
110k 23 23 золотых знака 113 113 серебряных знаков 377 377 бронзовых знаков
Просили круг а не сферу.
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
Отслеживать
123k 24 24 золотых знака 126 126 серебряных знаков 303 303 бронзовых знака
ответ дан 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 серебряных знака 100 100 бронзовых знаков
- html
- css
- html5
- css3
-
Важное на Мете
Связанные
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как сделать круг в круге?
Есть задача сделать круг и внутри круга сделать еще круг. Есть блок у которого данный круг добавляется с помощью before. Блоков у которых есть before с данным кругом достаточно много на странице. Проблема в том, что я на before наложил круг, но не могу в него вписать еще один. Как это можно исправить?
- Вопрос задан более трёх лет назад
- 3894 просмотра
2 комментария
Простой 2 комментария
Как сделать круглые изображения?
Превратить изображения в круг и добавить вокруг них рамку.
Решение
Для скругления уголков у элементов в CSS3 предназначено свойство border-radius , значением которого выступает радиус закругления. Если взять квадратное изображение и добавить к нему это свойство, то мы получим уже не квадратное, а круглое изображение. В качестве значения следует задать половину ширины рисунка. Правда, можно поступить и проще и значением указать заведомо большое число, превышающее размеры изображения. Так мы в любом случае получим круглую картинку и сможем применять стиль к изображениям разного размера.
Плюсом использования border-radius является то, что мы можем добавлять в стилях к элементу рамку, тень и она будет повторять контур. В примере 1 показано создание круглых изображений, для чего вводится класс round , с тенью и рамкой.
Пример 1. Круглые изображения
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения 
Результат данного примера в Opera показан на рис. 1.
Рис. 1. Круглые изображения
Браузеры Chrome и Safari некорректно отображают скруглённые уголки, что выглядит довольно некрасиво (рис. 2).
Рис. 2. Рамка в браузере Chrome
Здесь можно посоветовать только отказаться от рамки вообще или заменить border на свойство box-shadow . Вспоминаем, что оно может давать не только размытую тень, но и тень с резкими краями. К тому же box-shadow одновременно допускает наличие нескольких теней, параметры которых перечисляются через запятую. Таким образом, первая тень будет формировать рамку, а вторая добавлять затемнение. В примере 2 показан изменённый стиль, решающий проблему в Chrome с обрамлением.
Пример 2. Рамка из тени
HTML5 CSS3 IE Cr Op Sa Fx
Круглые изображения
Результат данного примера показан на рис. 3.
Рис. 3. Рамка в браузере Chrome
Заметьте, что изображения теперь плотно прилегают друг к другу, для добавления пространства между ними примените свойство margin .