Wrapping Content In Shapes With CSS3
How To Use Shape-Inside
The shape-inside allows us to form four shapes: rectangle, circle, polygon, and ellipse, though the shape that seems to work at the moment, is only the polygon. In the following example, we will try a triangle.
- .basic-shape {
- font-size: 12px;
- width: 300px;
- height: 300px;
- overflow: hidden;
- text-align: justify;
- -webkit-hyphens: manual;
- -webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px);
- }
This gives us.
If you want to wrap your content in a custom shape, but you don’t know how to set the cordinates, here is the trick.
First, create the shape in a vector editor like Adobe Illustrator or Inkscape. Then save it in an SVG format, and open it in a text editor.
Find the coordinates, assign each of them with a unit measurement (px or %). Copy them, and paste it as the polygon value. In this example, I simply create a Hexagon.
- .svg-shape {
- -webkit-shape-inside: polygon(75.778px 272.829px, 1.555px 144.271px,
- 75.778px 15.713px, 224.222px 15.713px, 298.444px 144.271px, 224.222px 272.829px);
- }
Which results in
Actually, it is possible to refer directly to the SVG file to wrap the content. Unfortunately, it doesn’t work at the moment as the browser has yet to implement it.
