Sippin' on Syntactic Sugar

proudly made here on earth

CSS Polygons Explained

I’ve been recently diving into front end development and am discovering the power of CSS and image manipulation. Previously I had known about adjusting the shape of corners was done with border-radius property:

image with rounded corners
`border-radius: 50px;`

Of course this method easily produces those cool circular profile pics that you see all the time:

image with fully rounded corners
`border-radius: 100%;`

But what if you want to create an image with “cut corners”?

image with cut bottom corners

I discovered that CSS has an element called polygon. With this you can create all sorts of shapes, like stars, if you wanted. For the task at hand, you can create the cut corner with the following:

example of polygon code

All the values within the ‘polygon’ could be overwhelming so let’s walk through it. Essentially each grouping is a point. So… polygon(x1 y1, x2 y2, x3 y3, x4 y4, x5 y5, x6 y6);. The image is basically on an x-axis and y-axis where the upper left corner is (0,0) coordinate and bottom right corner is (100%, 100%) coordinate.

x-axis and y-axis diagram
Upper left corner = (0,0). Bottom right corner = (100%, 100%).

polygon image with x and y axis overlay
Math is powerful.

I’d recommend practicing adjusting the values of the points to get more comfortable. You can use CodePen and here is one that I made:

See the Pen polygon by Charlotte Chang (@glamouracademy) on CodePen.

Also Bennett Feely has a great tool for making clip-paths via CSS called Clippy.