CSS clip-path property basic concept explained with examples

CSS clip-path property is a strong and flexible way to hide and show different parts of an element in CSS. We explain CSS clip-path concept here in this post with some examples and would have future posts for further steps.

In this CSS tricks article there are lots of example about CSS clip-path but I will explain some important concepts here.

The CSS clip-path syntax

.clip-inset {
  clip-path: inset(10px 20px 30px 40px);
  /* Also can take single values to make all sides the same, or 2 values (vert/horz), or 3 values (top/horz/bottom). */
}
.clip-circle {
  clip-path: circle(60px at center);
}
.clip-ellipse {
  clip-path: ellipse(60px 40px at 75px 30px);
}
.clip-polygon {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
  /* Note that percentages work as well as px */
}

We have four different shapes kind of clip-path. Lets explain each with a few examples.

This pen shows how an image can be clipped by different clip-path property shapes:

Inset

With inset we can make an inner rectangle that crops the image where we need it to.

.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}

Also we could use round keyword and a border radius to make round edges:

.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}

Eclipse

Ellipses are defined using this syntax: ellipse(radiusX radiusY at posX posY). The position is optional and will default to 50% 50%:

.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}

Circle

Circles are defined with this syntax: circle(radius at posX posY). And the position is default to 50% 50%:

.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

Polygon

Polygon is a very flexible shape maker. You can give it as many points as you like. The provided points are pairs of X and Y coordinates that can be of any unit. Here are three examples of clipping with Polygon creating rectangle,  x shape and star shape:

/* Triangle */
.polygon1 {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* X */
.polygon2 {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/* Star */
.polygon3 {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

All in one example

Also have a look at this example on CodePen which uses CSS clip-path for hover over effect:

You could play around with it through Bennet Feely’s Clippy. It will give us a better understanding around clipping with CSS clip-path. In the next article of CSS clip-path we will talk about CSS animations made by clipping and masking. Thanks for reading.

© 2019
Azadeh Faramarzi

This site is created and maintined by Azadeh Faramarzi , A passionate developer, sport and code lover who loves to share and write when she has some time.