{"id":17482,"date":"2013-06-25T21:01:47","date_gmt":"2013-06-25T13:01:47","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=17482"},"modified":"2024-09-03T18:18:12","modified_gmt":"2024-09-03T10:18:12","slug":"css3-content-wrapping","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-content-wrapping\/","title":{"rendered":"How to Wrap Content in Custom Shapes with CSS3"},"content":{"rendered":"

Print media<\/a>, compared to web media, offers greater flexibility in content layout and display. However, replicating those intricate shape frames used in magazines on the web can be challenging due to the structured nature of web content.<\/p>\n

Fortunately, the CSS3 team is developing new capabilities to make this possible for web content using the shape-inside<\/code> property.<\/p>\n

At present, this property is still in its early stages and, as of now, only works in Chrome (with a prefix). Additionally, some specifications are yet to be fully implemented.<\/p>\n

Let\u2019s explore how it works.<\/p>\n

Using the shape-inside Property<\/h2>\n

The shape-inside<\/code> property allows you to create four types of shapes: rectangle, circle, polygon, and ellipse. However, the only shape that appears to be functional at the moment is polygon<\/code>. Below is an example of creating a triangle shape:<\/p>\n

\r\n.basic-shape {\r\n  font-size: 12px;\r\n  width: 300px;\r\n  height: 300px;\r\n  overflow: hidden;\r\n  text-align: justify;\r\n  -webkit-hyphens: manual;\r\n  -webkit-shape-inside: polygon(0px 0px, 0 300px, 300px 300px);\r\n}\r\n<\/pre>\n
Here\u2019s the result:<\/p>\n
\"Triangle<\/figure>\n
If you want to wrap your content in a custom shape but are unsure how to define the coordinates, here\u2019s a simple method:<\/p>\n
First, create the shape in a vector editor<\/strong> such as Adobe Illustrator or Inkscape. Then, save it in SVG format<\/strong> and open it in a text editor<\/strong>.<\/p>\n
Locate the coordinates, assign a unit of measurement<\/strong> (px or %) to each, then copy and paste them as the polygon value. For example, here\u2019s how to create a hexagon:<\/p>\n
\r\n.svg-shape {\r\n  -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);\r\n} \r\n<\/pre>\n
And the result is:<\/p>\n
\"Hexagon<\/figure>\n
It is technically possible to reference the SVG file directly to wrap content, but this functionality is not yet supported in current browsers.<\/p>\n
Final Thoughts<\/h2>\n
While not every website will need to apply this property, these advancements hint at a more sophisticated future for web layouts. For more details, check out the following references:<\/p>\n