Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box

CSS clip-path property is your ticket to shape-shifting the monotonous, boxy layouts traditionally associated with flat, responsive design. You will begin to think outside the box, literally, and hexagons, stars and octagons will begin to take form on your web pages. Once you get your hands dirty with clip-path, theres no end to the shapes you can generate, simply by tweaking a few values.

While the focus of this article is on clip-path using polygons with CSS, all of the demos provide a reference to an inline SVG, in order to gain additional support on Firefox. Generating a responsive SVG clipped shape is trivial once you have created a responsive shape with CSS clip-path. Well look at this in detail later.

The post Creating Responsive Shapes With Clip-Path And Breaking Out Of The Box appeared first on Smashing Magazine.