Yes, we are going to make a text wrap perfectly inside a circular shape. No JS, no SVG, no external plugin. Only few lines of CSS and a basic HTML structure.
Let's go!
Explanation
<div class="box">
<i></i>
Lorem ipsum ..
</div>
div.box {
--s:450px; /*Size of the circle */
--p:15px; /* padding */
height: var(--s);
width: var(--s);
border-radius: 50%;
}
.box i,
.box::before {
content: '';
float: left;
height:100%;
width: 50%;
shape-outside: radial-gradient(farthest-side at right, transparent calc(100% - var(--p)), #fff 0);
}
.box i {
float: right;
shape-outside: radial-gradient(farthest-side at left, transparent calc(100% - var(--p)), #fff 0);
}
[box]
A basic div element having width=height and border-radius:50% to create a visual circle. I said "visual" because it's not the one that will make our text wrap around.
[i] & [box::before]
Two floating elements covering the whole div (full height and half width for each one) where we apply shape-outside to create half a circle inside each one. Below an illustration to better understand
The red element floating to the left will have half a circle on its right and the blue one will simply have the opposite. We adjust the radius of the circle using the variable p to simulate padding with the visual circle created by box.
That's it!
We can easily extend this trick to consider different shapes. All we have to do is to adjust shape-outside and keep the symmetry.
Example with a Rhombus
Related posts for more shapes
CSS Challenges - Custom text shape
Stack Overflow - CSS rotate text by n degress, but not the boundary box?
Stack Overflow - How to wrap text around a shape with border-radius?
Top comments (0)