Use the shape-outside property in CSS to flow text around elements. You can also use a polygon for more complex shapes:
.cirlce {
shape-outside: circle(50%);
width: 100px;
height: 100px;
}Copied to clipboard!
In the example above, this will create a circle to wrap around the text. By default, text is wrapped around its margin box. With shape-outside, you can define custom objects to wrap around. To create more complex objects, you can define a polygon or a path:
.shape-outside {
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: path('path-rule');
}Copied to clipboard!
You can also provide a URL for an image to be used. Make sure it is a png.
.shape-outside {
shape-outside: url(circle.png);
}Copied to clipboard!
Resources:
Remove ads
Want to get weekly updates to your mailbox? 📬
📚 Get access to exclusive content
Want to get access to exclusive content? Support webtips with the price of a coffee to get access to tips, checklists, cheatsheets, and much more. ☕
Get access
