how to make complex shapes by css

Today we are going to do something different: dig deep into one single CSS property. And that property is going to be the “clip” property.

I’m pretty sure some of you don’t even know there is a CSS property called clip since it’s probably the less used property in the world. It’s no big deal guys, we will cover pretty much everything you have to know about it.

The clip property aims at defining what portion of an element you want to show. You may have heard of this stuff as “crop”. There are a bunch of JavaScript plugins out there to crop an element, but actually you can do pretty much the same thing with the CSS clip property. Probably, with some limitations of course. We’ll take a look at them later.

Example

See the Pen <a href="https://codepen.io/w3codemasters/pen/rEWwLE/">how to make complex shapes by css</a> by w3codemasters (<a href="https://codepen.io/w3codemasters">@w3codemasters</a>) on <a href="https://codepen.io">CodePen</a>.