CSS3 Clip Path

Next ❯Object Fit

Used to show only the clipping region of an element

  • Like showing only specific area of any element
  • turned_in_notclip-path Methods
    • clip-path

  • turned_in_notclip-path Methods
    • circle()
    • inset()
    • ellipse()
    • polygon()

circle( )

To show circular clipping region of an element

/*Syntax-For circle */

circle(radius at x-axis y-axis)

radius

X-axis

Y-axis

circle(30% at 45% 35%);

img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:circle(30% at 45% 35%);
}
circlesubject
circleclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:circle(30% at 45% 35%);
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>

inset( )

To show rectangular clipping region of an element

/*Syntax-For rectangle*/

inset(top right bottom left)

top

right

bottom

left

inset(5% 5% 5% 5%);

img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:inset(5% 5% 5% 5%);
}
insetsubject
insetclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:inset(5% 5% 5% 5%);
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>

ellipse( )

To show ellipse based clipping region of an element

/*Syntax-For ellipse*/

ellipse(x-radius y-radius at x-axis y-axis)

x-axis, y-axis : Specifies Position along their axis
x-radius, y-radius : Specifies radius along their axis

x-radius

y-radius

x-axis

y-axis

ellipse(25% 45% at 40% 50%);

img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:ellipse(25% 45% at 40% 50%)
}
ellipsesubject
ellipseclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:ellipse(25% 45% at 40% 50%)
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>

polygon( )

To show polygon based clipping region of an element

/*Syntax-For polygon*/

polygon(x1 y1, x2 y2, x3 y3,.....,xN yN)

all X & Y values are the coordinate points on the image which connects together to form polygon

We are using 4-point polygon below
The top-left coordinate is (0, 0)
The top-right coordinate is (0, 100%)
The bottom-right coordinate is (100%, 100%)
The bottom-left coordinate is (100%, 0)

  • In place of '%', you can use other unit as well, like 'px' ...

x1

y1

x2

y2

x3

y3

x4

y4

polygon(10% 5%, 100% 0%, 100% 100%, 0% 100%);

img {
  height: 310px;
  background:#a4f3d8;
  clip-path:polygon(10% 5%, 100% 0%, 100% 100%, 0% 100%);
}
polygonsubject
polygonclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:polygon(10% 5%, 100% 0%, 100% 100%, 0% 100%);
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>

  • Values used inside the methods can be of other units (like in: px, em, pc etc), try below example:
clip-path:
img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:circle(72px at 48% 50%);
}
clip-pathsubject
clip-pathclose
<!DOCTYPE html>
<html>
<head>
<title>Full CSS Code</title>
<style>
img {
  height: 310px;
  display: block;
  margin: auto;
  background:#a4f3d8;
  clip-path:circle(72px at 48% 50%);
}
</style>
</head>
<body>
  <img src="imageUrl.png">
</body>
</html>

  • Object Fit
❮ Prev CSS3 Filter
Next ❯Object Fit
TryOut Examples"Learn to Explore..!"

TryOut Editor

receipt
❯