Как создать текст внутри круга с помощью CSS
Вы хотите создать текст внутри круга с помощью HTML и CSS? Звучит бредово, правда?
На самом деле, нет! Благодаря свойству shape-outside и некоторым трюкам CSS это вполне возможно.
Однако такой вариант вёрстки может оказаться не самым удобным. Необходимо принимать во внимание множество разных нюансов, среди них: количество символов, количество слов, варианты начертания, размер шрифта, форматирование текста и требования к адаптивности. Здесь сложно подогнать всё под один размер. Но давайте всё-таки попытаемся это сделать.
Наша цель: отобразить элемент <blockquote> (цитату) и имя автора в круге. Также мы хотим сделать вёрстку максимально универсальной. Она не потребует каких-либо дополнительных файлов и оставит HTML- разметку без изменений.
Вот к чему мы стремимся:
Примечание: В новой версии CSS Shapes появится функция shape-inside, которая позволит использовать фигуру как «обёртку» для содержимого элемента
На момент написания этой статьи функция shape-outside не поддерживается браузерами Internet Explorer и Microsoft Edge 18 и ниже
Начнём с HTML
В конце нам в любом случае понадобится «обёртка» (элемент, который инкапсулирует другие объекты страницы), поэтому давайте используем семантический тэг <blockquote> как внутренний элемент. Содержащая его «обёртка» может быть элементом div:
<div class="quote-wrapper">
<blockquote class="text" cite="http://www.inspireux.com/category/quotes/jesse-james-garrett/">
<p>Experience design is the design of anything, independent of medium, or across media, with human experience as an explicit outcome, and human engagement as an explicit goal.</p>
<footer>– Jesse James Garrett</footer>
</blockquote>
</div>
Мы помещаем саму цитату в тэг <p>, а имя автора в тэг <footer>. Затем создаём названия классов, которые понадобятся нам при работе с CSS.
Теперь немного базового CSS
Начнем с «обёртки», созданной с помощью элемента div. Сначала устанавливаем минимальный (адаптивный) размер квадрата со значением 300px, чтобы он вписывался в маленькие экраны. Затем придаём свойству position значение relative (позже нам это понадобится).
.quote-wrapper {
height: 300px;
position: relative;
width: 300px;
}
Теперь делаем так, чтобы цитата заполнила весь блок «обёртки», и имитируем форму круга, применяя к фону функцию radial gradient (Да-да, в этом примере мы не будем использоватьborder-radius).
.text {
background: radial-gradient(
ellipse at center,
rgba(0, 128, 172, 1) 0%,
rgba(0, 128, 172, 1) 70%,
rgba(0, 128, 172, 0) 70.3%
);
height: 100%;
width: 100%;
}
Обратите внимание, что край со значением 70% выглядит более зазубренным. Я вручную понемногу увеличивал процент и обнаружил, что края с 70.3% выглядят наиболее гладко.

Обратите внимание, край справа более гладкий, чем край слева
Теперь у нас есть основной круг. Добавьте к классу .text следующие стили:
.text {
color: white;
position: relative;
margin: 0;
}
Вот что у нас получилось на данный момент:

Применение CSS к тексту
Давайте для начала добавим стили абзацу:
.text p {
font-size: 21px;
font-style: italic;
height: 100%;
line-height: 1.25;
padding: 0;
text-align: center;
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}
После первоначальной публикации этой статьи многие оставили комментарии о том, что существует альтернативная техника, суть которой заключается в использовании функции radial-gradient как свойства shape-outside. Так формируется более гладкая полукруглая прямая по периметру многоугольника.
Давайте применим к цитате псевдоэлемент ::before, чтобы изменить её форму. Вот здесь нам понадобится свойство shape-outside. Мы создаём многоугольник с помощью функции polygon(), устанавливаем координаты его вершин и выравниваем по левой стороне, чтобы текст вписался в фигуру.
.text::before {
content: "";
float: left;
height: 100%;
width: 50%;
shape-outside: polygon(
0 0,
98% 0,
50% 6%,
23.4% 17.3%,
6% 32.6%,
0 50%,
6% 65.6%,
23.4% 82.7%,
50% 94%,
98% 100%,
0 100%
);
shape-margin: 7%;
}
Теперь давайте поменяем цвет градиентного фона на красный. Точки и соединительные линии полигонов в редакторе путей останутся голубыми. Мы меняем цвет временно для большего контраста с инструментами редактирования.
background: radial-gradient(
ellipse at center,
rgba(210, 20, 20, 1) 0%,
rgba(210, 20, 20, 1) 70%,
rgba(210, 20, 20, 0) 70.3%
);
Мне нравятся инструменты разработчика в Firefox, потому что там есть очень удобные функции, например, редактор путей для shape-outside. Кликните по фигурке многоугольника в «Инспекторе», чтобы отобразить активную фигуру в окне браузера. Большие пальцы вверх команде разработчиков Mozilla Firefox за создание такого классного интерфейса!

Инструмент редактирования фигур в Firefox также можно применять к значениям clip-path и <basic-shape>.
Вот что у нас вышло на этом этапе:

Точки по краям фигуры появляются с помощью инструментов редактирования Firefox
Мы можем сделать то же самое с псевдоэлементом абзаца ::before. Применяем свойство shape-outside, чтобы создать такой же многоугольник, но отзеркаленный, затем выравниваем его по правой стороне.
.text p::before {
content: "";
float: right;
height: 100%;
width: 50%;
shape-outside: polygon(
2% 0%,
100% 0%,
100% 100%,
2% 100%,
50% 94%,
76.6% 82.7%,
94% 65.6%,
100% 50%,
94% 32.6%,
76.6% 17.3%,
50% 6%
);
shape-margin: 7%;
}

Выглядит неплохо, но куда делся футер? Он вышел за пределы элемента <blockquote> (в котором расположен круглый цветной фон), поэтому мы не можем увидеть этот белый текст на белом фоне.
Добавляем стили к футеру
Теперь мы можем добавить стили элементу <footer> и придать свойству position значение absolute, чтобы вернуть наш футер обратно в границы круга.
.quote-wrapper blockquote footer {
bottom: 25px;
font-size: 17px;
font-style: italic;
position: absolute;
text-align: center;
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
width: 100%;
}
Опять же, вы можете поменять цвет фона на тот, который нужен вам.
Вот теперь начинается запутанная часть. Сам текст должен быть стилизован так, чтобы количество слов и символов помещалось в фигуру. Я использовал следующие стили CSS, чтобы правильно его разместить:
- font-size;
- shape-margin (нам нужно исключить две области);
- line-height;
- letter-spacing;
- font-weight;
- font-style;
- min-width и min-height (до размеров элемента, содержащего класс .quote-wrapper).
Добавляем кавычки для красоты
Помните гигантские кавычки на самом первом примере? Их мы и собираемся сейчас сделать.
Мы воспользуемся псевдоэлементом ::before для класса .quote-wrapper. Да, придется сильно заморочиться, чтобы он выглядел хорошо. Я обнаружил, что свойство line-height сильно влияет на положение кавычек по вертикали.
.quote-wrapper::before {
content: "\201C";
color: #ccc;
font-family: sans-serif, serif;
font-size: 270px;
height: 82px;
line-height: 1;
opacity: .9;
position: absolute;
top: -48px;
left: 0;
z-index: 1;
}
Вообще, между изогнутыми (“умными”) и прямыми ("тупыми") кавычками есть разница. Я бы посоветовал использовать изогнутые кавычки в диалогах, а прямые кавычки в программировании.
Работаем над адаптивным дизайном
Нам, пожалуй, стоит сделать нашу цитату крупнее на больших экранах. Я установил контрольную точку на 850px, но вы, возможно, захотите использовать что-то другое.
@media (min-width: 850px) {
.quote-wrapper {
height: 370px;
width: 370px;
}
.quote-wrapper::before {
font-size: 300px;
}
.text p {
font-size: 26px;
}
.quote-wrapper blockquote footer {
bottom: 32px;
}
}
Ну, вот и всё!
Примечание: В новой версии CSS Shapes появится функция shape-inside, которая позволит использовать фигуру как «обёртку» для содержимого элемента
Мы поместили текст в фигуру круга, используя комбинацию старых и новых техник CSS, чтобы создать красивый и привлекающий внимание блок с цитатой. И мы добились желаемого результата без каких-либо дополнительных файлов, оставив разметку HTML нетронутой и семантической.
Надеюсь, эта статья мотивировала вас исследовать новые возможности вёрстки со свойством shape-outside. Теперь ждите появления функции shape-inside.