Как нарисовать полукруг на CSS
Полукруг получается если у прямоугольника, у которого одна сторона в два раза больше другой, закруглить углы [см. генератор]. С помощью padding в процентах можно добиться пропорционального изменения высоты и ширины «резинового» блока.
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
clip-path : отсечь лишний фрагмент HTML-элемента
Свойство clip-path вырезает из элемента часть:
Слово1 да слово2 да слово3 да слово4
текст
Слово1 да слово2 да слово3 да слово4
текст
С помощью shape-inside
Свойство shape-inside позволяет вписать текст в окружность, даже без самой окружности, но пока не поддерживается браузерами.
текст текст текст текст текст текст текст текст текст текст
текст
- Круг на CSS
- Треугольник на CSS
Border css на половину круга
Ребят,как сделать чтобы было из этого:
Получить при наведении это:
Не переворачивая объект типа: transform: rotate(45deg);
Отслеживать
задан 4 дек 2018 в 17:41
111 8 8 бронзовых знаков
Посмотрите здесь developer.mozilla.org/en-US/docs/Web/CSS/border-top-left-radius
4 дек 2018 в 18:01
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
.circle < width: 100px; height: 100px; border-radius: 50%; position: relative; background: #333; >.circle-out < width: 98px; height: 98px; left: 1px; top: 1px; border-radius: 50%; position: absolute; background: #fff; >.circle:hover
Отслеживать
ответ дан 4 дек 2018 в 18:04
1,585 7 7 серебряных знаков 10 10 бронзовых знаков
Хороший ответ (+) Просто и надёжно
4 дек 2018 в 20:55
- html
- css
-
Важное на Мете
Похожие
Подписаться на ленту
Лента вопроса
Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.
Дизайн сайта / логотип © 2023 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2023.10.27.43697
Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Как создать полукруглую диаграмму с помощью CSS
Несмотря на то, что использование HTML 5 Canvas и SVG может оказаться более элегантным решением, в этом уроке мы узнаем, как создать полукруглую диаграмму на чистом CSS.
Чтобы понять, что мы собираемся создать, взгляните на готовое демо на CodePen:
HTML разметка
Начнем с простой разметки; чистый неупорядоченный список с элементом span в каждом из элементов списка:
class="chart-skills">
HTML
Python
Добавляем стили списку
С готовой разметкой приступаем к приданию парочки простых стилей нашему списку:
.chart-skills
position: relative;
width: 350px;
height: 175px;
Затем, каждому из элементов списка мы дадим по ::after и ::before псевдо-элементу, а затем дадим им стили:
.chart-skills::before,
.chart-skills::after
position: absolute;
.chart-skills::before
content: '';
width: inherit;
height: inherit;
border: 45px solid rgba(211,211,211,.3);
border-bottom: none;
border-top-left-radius: 175px;
border-top-right-radius: 175px;
.chart-skills::after
content: 'Top Skills';
left: 50%;
bottom: 10px;
transform: translateX(-50%);
font-size: 1.1rem;
font-weight: bold;
color: cadetblue;
Обратите внимание на стили для псевдо-элемента ::before . Это даст нам наш полукруг.
Итак, вышеупомянутые правила дадут нам следующий результат:
Добавляем стили элементам списка
Давайте обсудим стили для элементов списка.
Позиционирование
Не забывая про позиционирование элементов списка, сделаем следующее:
- Расположим их прямо под их родительским элементом и
- дадим им соответствующие стили, чтобы создать обратный полукруг.
Далее следует упомянуть еще пару вещей:
- Элементы списка имеют position:absolute, так мы можем выставить их z-index правильным образом.
- Мы изменим изначальное значение transform-origin (например, transform-origin: 50% 50% ) элементов списка. В особенности, установим transform-origin: 50% 0 . В этом случае, когда мы начнем поворачивать предметы, их центральный верхний угол окажется точкой, вокруг которой будет происходить вращение.
Вот необходимые стили CSS:
.chart-skills li
position: absolute;
top: 100%;
left: 0;
width: inherit;
height: inherit;
border: 45px solid;
border-top: none;
border-bottom-left-radius: 175px;
border-bottom-right-radius: 175px;
transform-origin: 50% 0;
.chart-skills li:nth-child(1)
z-index: 4;
border-color: green;
.chart-skills li:nth-child(2)
z-index: 3;
border-color: firebrick;
.chart-skills li:nth-child(3)
z-index: 2;
border-color: steelblue;
.chart-skills li:nth-child(4)
z-index: 1;
border-color: orange;
Посмотрите, что мы сделали, на следующей визуализации:
Сейчас виден только зеленый элемент меню ( z-index которого равен 4). Остальные находятся под ним.
Анимации
Прежде чем приступить к анимациям, давайте укажем желаемые процентные значения для каждого элемента (например: сколько каждый элементов займет места на полукруге). Ознакомьтесь со следующей таблицей:
| Язык | Проценты |
|---|---|
| CSS | 12 |
| HTML | 32 |
| PHP | 34 |
| Python | 22 |
Затем, мы посчитаем, на сколько градусов нам нужно будет анимировать (повернуть) каждый из наших элементов. Чтобы узнать точное число для каждого элемента, умножим его процентное число на 180° (не 360° потому что у нас полукруг):
| Язык | Проценты | Градус |
|---|---|---|
| CSS | 12 | 12/100 * 180 = 21.6 |
| HTML | 32 | 32/100 * 180 = 57.6 |
| PHP | 34 | 34/100 * 180 = 61.2 |
| Python | 22 | 22/100 * 180 = 39.6 |
Теперь мы готовы настраивать анимацию. Сначала, определяем стиль анимации, который будет одинаковым у всех элементов, добавляя несколько значений к .chart-skills li :
animation-fill-mode: forwards;
animation-duration: .4s;
animation-timing-function: linear;
Затем задаем уникальные значения стиля анимации:
.chart-skills li:nth-child(1)
z-index: 4;
border-color: green;
animation-name: rotate-one;
.chart-skills li:nth-child(2)
z-index: 3;
border-color: firebrick;
animation-name: rotate-two;
animation-delay: .4s;
.chart-skills li:nth-child(3)
z-index: 2;
border-color: steelblue;
animation-name: rotate-three;
animation-delay: .8s;
.chart-skills li:nth-child(4)
z-index: 1;
border-color: orange;
animation-name: rotate-four;
animation-delay: 1.2s;
Заметьте, что мы добавляем задержку всем элементам, кроме первого. В этом случае создаем последовательные анимации. Например, когда кончается анимация первого элемента, начинается анимация второго, и т.д.
Вторым шагом зададим конкретно анимации:
@keyframes rotate-one
transform: rotate(21.6deg);
* 12% => 21.6deg
@keyframes rotate-two
transform: rotate(21.6deg);
transform: rotate(79.2deg);
* 32% => 57.6deg
* 57.6 + 21.6 => 79.2deg
@keyframes rotate-three
transform: rotate(79.2deg);
transform: rotate(140.4deg);
* 34% => 61.2deg
* 61.2 + 79.2 => 140.4deg
@keyframes rotate-four
transform: rotate(140.4deg);
transform: rotate(180deg);
* 22% => 39.6deg
* 140.4 + 39.6 => 180deg
Прежде, чем двигаться дальше, посмотрим, как работают анимации:
Первый элемент идет от transform: none к transform: rotate(21.6deg) .
Второй от transform: rotate(21.6deg) (начинается с последней позиции первого элемента) к transform: rotate(79.2deg) (57.6deg + 21.6deg).
Третий от transform: rotate(79.2deg) (начинается с последней точки второго элемента) к transform: rotate(140.4deg) (61.2deg + 79.2deg).
Четвертый от transform: rotate(140.4deg) (начинается с последней позиции третьего элемента) к transform: rotate(180deg) (140.4deg + 39.6deg).
Прячьте!
Последнее, но не менее важное, это спрятать вторую половину диаграммы снизу, для этого добавим следующее:
.chart-skills
/* existing rules. */
overflow: hidden;
.chart-skills li
/* existing rules. */
transform-style: preserve-3d;
backface-visibility: hidden;
overflow: hidden показывает нам, что видна только первая половина круга (та, что с ::before псевдо-элементом) Не стесняйтесь удалить это свойство, если вам интересно посмотреть на начальные позиции элементов списка.
transform-style: preserve-3d и backface-visibility: hidden предотвращают нежелательные дерганья анимаций в различных браузерах. Если проблема не решилась, попробуйте эти решения.
Почти готово! Осталось только задать стили названиям секций, чем мы займемся в следующем разделе.
Вот CodePen демо, показывающее нашу текущую диаграмму:
Задаем стили названиям секций
В этом разделе мы зададим стили названиям секций нашей диаграммы.
Позиционирование
В зависимости от их положения, делаем следующее:
- Даем им position: absolute и используем top и left , чтобы задать желаемое положение.
- Используем негативные значения, чтобы повернуть их. Конечно, значения не с потолка. На деле, они взяты из последнего куска родительского элемента. Например, последний момент второго элемента списка это transform: rotate(79.2deg) , а значит мы используем transform: rotate(-79.2deg).
Ниже представлен соответсвующий код CSS:
.chart-skills span
position: absolute;
font-size: .85rem;
.chart-skills li:nth-child(1) span
top: 5px;
left: 10px;
transform: rotate(-21.6deg);
.chart-skills li:nth-child(2) span
top: 20px;
left: 10px;
transform: rotate(-79.2deg);
.chart-skills li:nth-child(3) span
top: 18px;
left: 10px;
transform: rotate(-140.4deg);
.chart-skills li:nth-child(4) span
top: 10px;
left: 10px;
transform: rotate(-180deg);
Анимации
Теперь, когда мы разместили наши названия, самое время задать им анимации. Стоит упомянуть две вещи:
- По умолчанию, все названия спрятаны и появляются только когда начинается анимация их родительского элемента.
- Потому мы также, как и в случае с их родительскими элементами, используем animation-delay , чтобы сделать последовательную анимацию. Также добавляем backface-visibility: hidden , чтобы убедиться в отсутствии дерганий в различных браузерах.
CSS код анимаций представлен ниже:
.chart-skills span
backface-visibility: hidden;
animation: fade-in .4s linear forwards;
.chart-skills li:nth-child(2) span
animation-delay: .4s;
.chart-skills li:nth-child(3) span
animation-delay: .8s;
.chart-skills li:nth-child(4) span
animation-delay: 1.2s;
@keyframes fade-in
opacity: 0;
opacity: 1;
Вот наш конечный результат:
Поддержка браузеров и возможные проблемы
В целом, демо отлично работает во всех браузерах. Хочу лишь обсудить две небольшие проблемы, связанные с border-radius .
Во-первых, если бы мы задали разные цвета нашим элементам, диаграмма могла бы выглядеть так:
Обратите внимание на верхний и нижний угол третьего элемента. Там две красные линии, которые идут от border-color четвертого элемента. Мы видим эти лини потому что четвертый элемент имеет более темный цвет границы, чем третий элемент. Хоть это и мелкая проблема, хорошо о ней знать.
Во-вторых, в Safari диаграмма появляется следующим образом:
Обратите внимание на эти небольшие промежутки между вторым и третьим элементом. Если вы знаете, как с этим справиться, расскажите нам об этом в комментариях!
Заключение
В этом уроке мы создали полукруглую диаграмму на чистом CSS. Вновь, как упоминалось во вступлении, есть более мощные решения (HTML5 Canvas и SVG) для создания вещей подобного рода. Однако, если вам нужно что-то простое и легкое, при этом с вызовом, тогда CSS идеально подойдет!
Круги в CSS
От автора: я постоянный эксперт Cloud Four по кругам. Я не планировал им быть. Некоторое время назад мы работали над проектом, в котором было много кругов: круглые контейнеры, круглые миниатюры, круглые кнопки. И сначала я стал парнем, с которым можно поговорить, если у вас возникли проблемы с кругами и CSS.
Но я открою вам секрет: в этом нет ничего сложного. К концу этой статьи я думаю, что вы тоже будете экспертом.
Создание кругов
Существует несколько методов определения динамических круглых форм в HTML и CSS, каждый из которых имеет свои плюсы и минусы. Вот те немногие, с которыми я экспериментировал больше всего, от самых распространенных и до наименее распространенных.
border-radius
Самая распространенная техника — это скруглить все углы на 50%. Это самый простой способ, и он широко поддерживается. Свойство border-radius также будет влиять на обводки, тени и целевой размер касания / клика элемента.
Если вы хотите, чтобы круг растягивался до формы таблетки, установите для border-radius половину высоты элемента вместо 50%. Если высота неизвестна, выберите произвольно большое значение (например, 99em).
SVG
SVG может включать в себя элемент , который может быть стилизован аналогично любому другому контуру. Они очень хорошо поддерживаются и производительны для анимации, но требуют больше разметки, чем другие методы. Чтобы предотвратить визуальное обрезание фигуры, убедитесь, что радиус круга (плюс половина ширины его обводки, если есть) немного меньше viewBox SVG.
clip-path
Это новая техника. Ее поддержка вполне достойная, но менее последовательная. clip-path не влияет на макет элемента, что означает, что оно влияет на обводку и, скорее всего, будет скрывать внешние тени. Это может быть хорошо или плохо в зависимости от того, чего вы пытаетесь достичь.
Радиальный градиент
Мы можем использовать background-image и radial-gradient, чтобы визуально заполнить элемент кругом. Любой контент будет располагаться поверх этой фигуры, но его расположение (включая целевой размер касания / клика) не будет затронуто. Это мой наименее любимый метод, потому что края круга могут казаться неровными или нечеткими в зависимости от браузера, но это может хорошо подходить для тонких фоновых деталей.
Центрирование контента
Можно использовать практически любой метод для центрирования вещей с помощью CSS. Но иногда вы можете заметить, что содержимое выглядит слегка смещенным. Хотя это не уникально для круглых контейнеров, их уменьшенная площадь поверхности делает проблему еще более заметной.
Сравнение методов центрирования для элементов разных размеров в Safari. Обратите внимание, что некоторые методы имеют более заметный джиттер в положении значка относительно его контейнера.
Это связано с тем, как браузеры рассчитывают субпиксели. Каждый раз, когда мы используем относительные единицы, единицы на основе окра просмотра или значения из модульной шкалы, есть вероятность, что мы просим браузер вычислять дробные значения, например 22.78125px. Когда-нибудь эта проблема может сломать нашу сетку или вызвать другие фундаментальные проблемы. В наши дни браузеры тщательно работают над изменением вычислений в зависимости от элемента, свойства и контекста, но это все равно не идеально.
По моему опыту, самый гибкий метод для центрирования — использовать комбинацию абсолютного позиционирования (чтобы установить центральную точку на основе расположения родительского элемента) и преобразования (чтобы поместить дочерний элемент с помощью относительных вычислений):
Обрезка содержимого
Центрирование это хорошо, но что, если мы хотим заполнить круг изображением?
С помощью HTML / CSS
Мы можем обрезать элемент img до круга, используя border-radius:
Это имеет некоторые ограничения:
Элемент не адаптируется к своему контейнеру.
Мы не можем применить какие-либо внутренние тени, чтобы как-то отделить изображение от фона (кроме как в самом изображении).
Мы используем object-fit: cover для предотвращения искажения неквадратных изображений, но это не поддерживается в IE11.
Вот более сложный пример. В нем используется элемент-оболочка, чтобы установить соотношения сторон блока для поддержания квадратных пропорций, в нем улучшается обработка неквадратных изображений с помощью @supports и применяется прозрачная внутренняя тень, чтобы отделить изображение от фона:
С помощью SVG
Мы можем сделать то же самое, используя SVG:
Но поскольку элементы SVG image не поддерживают srcset или sizes, это, вероятно, плохой выбор для шаблона эскизов изображений общего назначения.
Субпиксельные промежутки
Если вы наложите внутренние тени, границы или другие причудливые элементы поверх круглого содержимого, вы можете в конечном итоге заметить, что появляются некоторые субпиксельные артефакты:
Светлые пиксели вдоль края, где фон выходит за внутреннюю границу.
К сожалению, я не нашел решения этой проблемы. Кажется, это происходит независимо от техники, используемой для рисования границы или отображения изображения, и это имеет место в некоторой степени в каждом браузере.
Если вы найдете способ наложения круговых эффектов без этих артефактов, пожалуйста, дайте мне знать в комментариях!
Обтекание текстом
Текст! Это основа Интернета. Он заполняет прямоугольники и разбивается на строки. Что мы можем сделать с этим?
Внешний текст
Вы можете задать обтекание текстом вокруг круглой фигуры, используя свойство shape-outside:
Внутренний текст
Стоп! Это, наверное, плохая идея! Сделать его адаптивным практически невозможно! Просто подождите, пока у нас не будет свойства shape-inside!
Точно? Хорошо, хорошо, у Джонатана Скита есть интеллектуальный хак. Он использует псевдо-элементы для установки shape-outside по обе стороны от текста:
Вдоль контура
Мы можем установить текст по изогнутому контуру с помощью SVG и :
К сожалению, поддерживается для не во всех браузерах, но преобразование в не слишком сложное.
Заключение!
Вот и все! Вы прочитали длинную статью о действительно важной теме, прошли по ее минным полям с вложенными заголовками и повторяющимися демонстрациями и обрели знание о кругах в качестве единственной награды! Продолжайте в том же духе, отважный читатель! Я верю в вас!
Автор: Tyler Sticka
Редакция: Команда webformyself.