CSS Shapes Editor Extension for Chrome

A Big thanks to the developer "Razvan Climan", the guy behind the extension that we are talking about. CSS Shapes Editor for Chrome, an useful extension that allows you to warp texts around the custom paths.

Wrap Content around circle shape

This page is to demonstrates various shape-outside methods such as circle, ellipse and polygon.

For example, lets see how to wrap the content around a football image. To do that, we will use shape-outside property and circle() method. The shape-outside property tells the web browser to extract a shape from the image. The circle(r at cx cy) method takes three arguments - r, the radius; cx and cy - the coordinates of the circle center on the X and Y axis.

Wrap Content around Polygon shape

The next example will consist of a text wrapping around the baseball bat. Here we are going to polygon() for shape-outline and float:right. So the style looks as this : shape-outside: polygon(30px 438px, 11px 408px, 15px 361px, 36px 310px, 84px 281px, 112px 254px, 218px 3px, 286px 38px, 151px 270px, 145px 307px, 156px 363px, 128px 420px, 102px 444px, 66px 453px);

How to Edit CSS Shapes?

It's simple, checkout the tutorial here and for more information watch the video at the end of the post!

Download CSS Shape Editor extension

You can download and install the extension from Chrome Web Store