Скачать или смотреть CSS Tricks : Wrapping Text inside a circle [Pure CSS]

Wrapping Text inside a circle. Below is the CSS property I used

body {
font-family: "Titillium Web", sans-serif;
font-size: 20px;
line-height: 1.4;
background-color: #84a9ac;
}

.quote-wrapper {
width: 300px;
height: 300px;
position: relative;
margin: 10vh auto 0; /*OPTIONAL MARGIN*/
}

.text {
width: 100%;
height: 100%;
/*BLUE BG*/
background: radial-gradient(
ellipse at center,
rgba(59, 105, 120, 1) 0%,
rgba(49, 85, 97, 1) 70%,
rgba(0, 128, 172, 0) 70.3%
);
position: relative;
margin: 0;
color: white;
}

.text p {
height: 100%;
font-size: 21px;
line-height: 1.25;
padding: 0;
text-align: center;
font-style: italic;
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.text::before {
content: "";
width: 50%;
height: 100%;
float: left;
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%;
}

.text p::before {
content: "";
width: 50%;
height: 100%;
float: right;
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%;
}

.quote-wrapper blockquote footer {
width: 100%;
position: absolute;
bottom: 30px;
font-size: 17px;
text-align: center;
font-style: italic;
text-shadow: 0.5px 0.5px 1px rgba(0, 0, 0, 0.3);
}

.quote-wrapper::before {
content: "\201C";
font-size: 270px;
height: 82px;
line-height: 0.78;
line-height: 1;
position: absolute;
top: -48px;
left: 0;
z-index: 1;
font-family: sans-serif, serif;
color: #ccc;
opacity: 0.9;
}