Как сделать элемент круглым на 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
RAD — угол в радианах,
DEG — угол в градусах
Отобразим эту формулу в виде простейшей функции–конвертёра:
Теперь нам нужно определить центр координат, а также смещение контейнера, в котором будет строиться наш круг:
Смещение нужно, только в том случае, если позиционирование root не является относительным (css position: relative).
В обратном случае все элементы внутри и без этого будут позиционироваться относительно родительского элемента благодаря CSS.
Итак, фундамент готов — осталось только дописать вычисление позиции каждого отдельного элемента:
iter — индекс обрабатываемого элемента, с помощью которого делается угловой сдвиг,
radius — радиус окружности заданный в опциях виджета,
cx — вычисленный ранее центр оси координат Ox.
Таким образом мы получили координату x. Таким же нехитрым способом определяется и y:
Ну, а зная требуемые координаты элемента, нам остаётся лишь позиционировать элементы.
Для этого мы можем использовать jQuery метод css, либо, для более эффектной, плавной расстановки элементов методом animate:
,options.animationSpeed);Код целиком:
Как расположить элементы по кругу css
В виду всех этих нюансов наиболее правильным решением все же будет использование html и css.
Допустим у нас задача написать по кругу сверху «Привет», а снизу «мир».
Создадим адаптивный круг (div с классом “disk”), вокруг которого будет располагаться наш текст.
div class="disk"> div>
.disk position: relative; background: #4a9266; width: 30%; padding: 15% 0; border-radius: 50%; /* адаптивный круг */ margin: 10% auto; font: 4.5vmin monospace; >
Далее, для того чтобы расположить правильно текст, нужно будет позиционировать каждую букву отдельно. Для этого заключим каждую букву в отдельный тег, например b. Зададим ему свойство абсолютного позиционирования.
div class="disk"> b>Пb> b>рb> b>иb> b>вb> b>еb> b>тb> b>мb> b>иb> b>рb> div>
.disk b position: absolute; left: 50%; /* все буквы ставим в одну точку*/ width: 0; /* убираем отступ */ >
Строку, которая будет сверху круга («Привет»), позиционируем
.disk b:nth-of-type(-n+6) bottom: 50%; /* отступ от центра по радиусу */ -ms-transform-origin: 0% 100%; -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; padding-bottom: 50%; /* отступ от центра круга */ >
Где 6 — это количество букв в текущей части текста.
Далее позиционируем каждую букву отдельно, поворачивая ее на определенное количество градусов. Так как размер шрифта у нас 4,5 %. Пусть на каждый символ у нас приходится 6 градусов.
Очень важно проставляя поворот каждой букве учесть пробел между словами, если он есть. Как символ мы его не считаем, но пропустить 6 градусов для пробела в нужном месте нужно.
Исходя из этого определяем символы которые будут в центре, ставим им поворот 3 и -3 (357) градуса и далее высчитываем. Получаем:
.disk b:nth-of-type(1) -ms-transform: rotate(345deg); -webkit-transform: rotate(345deg); transform: rotate(345deg);> /*Укажем расположение для буквы П*/ .disk b:nth-of-type(2) -ms-transform: rotate(351deg); -webkit-transform: rotate(351deg); transform: rotate(351deg);> /*Укажем расположение для буквы Р*/ .disk b:nth-of-type(3) -ms-transform: rotate(357deg); -webkit-transform: rotate(357deg); transform: rotate(357deg);> /*Укажем расположение для буквы И*/ .disk b:nth-of-type(4) -ms-transform: rotate(3deg); -webkit-transform: rotate(3deg); transform: rotate(3deg);> /*Укажем расположение для буквы В*/ .disk b:nth-of-type(5) -ms-transform: rotate(9deg); -webkit-transform: rotate(9deg); transform: rotate(9deg);> /*Укажем расположение для буквы Е*/ .disk b:nth-of-type(6) -ms-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg);> /*Укажем расположение для буквы Т*/
Затем тоже самое проделываем для нижней части. Селектор .disk b:nth-of-type(n+7) начинается с 7, поскольку в слове выше было использовано 6 букв.
Подробнее о работе псевдоклассов css можно почитать в соответствующей статье.
/* мир */ .disk b:nth-of-type(n+7) top: 50%; -ms-transform-origin: 50% 0; -webkit-transform-origin: 50% 0; transform-origin: 50% 0; padding-top: 50%; /* влияет на удаление букв от средины окружности */ > .disk b:nth-last-of-type(1) -ms-transform: rotate(354deg); -webkit-transform: rotate(354deg); transform: rotate(354deg);> /*Укажем расположение для буквы М*/ .disk b:nth-last-of-type(2) -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg);> /*Укажем расположение для буквы И*/ .disk b:nth-last-of-type(3) -ms-transform: rotate(6deg); -webkit-transform: rotate(6deg); transform: rotate(6deg);> /*Укажем расположение для буквы Р*/
Все готово. Если вам нужен просто текст, Вы можете сделать прозрачным круг.
Кроссбраузерность
Этот код работает во всех современных браузерах, поддерживающих html 5 и css 3.
В отличии от использования обычной картинки:
- Увеличивается скорость загрузки страницы, так как не нужно грузить дополнительную графику;
- Вы получаете возможность быстро и легко редактировать размер и цвет шрифта, радиус круга и непосредственно сам текст.
Динамически расположить элементы по кругу
Добрый день. Есть задача — сверстать блок на фоне градиента (смотри скриншот, слева). Динамическое количество элементов располагаются радиально по границе круга. При наведении на элемент — ховер эффект. С чем я справился (смотри скриншот, справа). Проблема в следующем: граница круга должна «прерываться» около иконки, иконка должна перекрывать целиком эту границу. Как это сделать? Пытался шаманить с прозрачными границами и фоном у иконок — не вышло. ДЕМО
body < background: rgb(59, 67, 113); background: -moz-linear-gradient(top, rgba(59, 67, 113, 0.9) 0%, rgba(243, 144, 79, 0.9) 99%); background: -webkit-linear-gradient(top, rgba(59, 67, 113, 0.9) 0%, rgba(243, 144, 79, 0.9) 99%); background: linear-gradient(to bottom, rgba(59, 67, 113, 1) 0%, rgba(243, 144, 79, 1) 99%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3b4371', endColorstr='#f3904f', GradientType=0); background-attachment: fixed; >@mixin distribute-on-circle( $nb-items, $circle-size, $item-size) < $half-item: ($item-size / 2); $half-parent: ($circle-size / 2); position: relative; width: $circle-size; height: $circle-size; padding: 0; border-radius: 50%; list-style: none; box-sizing: content-box; >* < display: block; position: absolute; top: 50%; left: 50%; width: $item-size; height: $item-size; margin: -$half-item; >$angle: (360 / $nb-items); $rot: 0; @for $i from 1 through $nb-items < >:nth-of-type(#) < transform: rotate($rot * 1deg) translate($half-parent) rotate($rot * -1deg); >$rot: ($rot + $angle); > > .advantages < h2 < text-align: center; >&-circle < @include distribute-on-circle(8, 30em, 6em); margin: 5em auto 0; border: 2px solid white; &__element < img < display: block; width: 100%; >> > > 
Отслеживать
Embarcadero
задан 8 янв 2017 в 11:59
Embarcadero Embarcadero
425 1 1 золотой знак 4 4 серебряных знака 12 12 бронзовых знаков
в демо картинки не открываются
8 янв 2017 в 12:07
Вариант послать в одно место дизайнера не рассматривается?
8 янв 2017 в 16:24
@L.Vadim странно, у меня открывается
8 янв 2017 в 20:36
@mJeevas Поздно, все уже согласовано
8 янв 2017 в 20:37
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
Ну вроде того. Но математика для меня непосильная, поэтому я просто подогнал дуги как получилось. Если есть желание заморочится с точными расчетами, то посмотреть как считаются координаты дуг в svg можно тут — http://shpargalkablog.ru/2015/11/svg.html
Если кратко. Чтобы посчитать параметры одной други, нужно из центра окружности провести 2 луча проходящих через точки на окружности, которые ограничивают дугу (т.е. выделить сектор) и найти координаты этих точек (кажется r sin A и r cos А). В этих точках нужно построить касательные к окружности (т.е. взять производную, чтобы получить уравнения прямых). В svg нужно прописать координаты трех точек — точка начала дуги, точка окончания дуги и точка пересечения касательных. Тогда получится правильная дуга.
.arc < position: absolute; left: 20px; top: 20px; >.crc < width: 500px; height: 500px; position: absolute; left: 20px; top: 20px; background-color: rgba(255, 0, 0, .3); border-radius: 500px; >div:nth-child(2) < transform: rotate(-30deg); >div:nth-child(3) < transform: rotate(-60deg); >div:nth-child(4) < transform: rotate(-90deg); >div:nth-child(5) < transform: rotate(-120deg); >div:nth-child(6) < transform: rotate(-150deg); >div:nth-child(7) < transform: rotate(-180deg); >div:nth-child(8) < transform: rotate(-210deg); >div:nth-child(9) < transform: rotate(-240deg); >div:nth-child(10) < transform: rotate(-270deg); >div:nth-child(11) < transform: rotate(-300deg); >div:nth-child(12)