Categories
CSS Web development

CSS Clip-path Property

CSS clip-path property

The CSS clip-path property allows you to clip an element to a basic shape or to an SVG source.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
img {
  clip-path: circle(50%);
}
</style>
</head>
<body>

<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="280" height="220" alt="cyclist">

</body>
</html>

Output:

cyclist

Syntax:

clip: clip-source|basic-shape|margin-box|border-box|padding-box|content-box|fill-box|stroke-box|view-box|none;

clip-source – specifies a URL to an SVG element.

basic-shape – clips an element to a basic shape (circle, ellipse, polygon, or inset).

margin-box – uses the margin box as the reference box.

border-box – uses the border-box as the reference box.

padding-box – uses the padding-box as the reference box.

content-box – uses the content box as the reference box.

fill-box – uses the bounding box as the reference box.

stroke-box – uses the bounding box as the reference box.

view-box – uses the SVG viewport as a reference box.

none (default) – no clipping is done.

More examples:

<!DOCTYPE html>
<html>
<head>
<style>

.one img {
  clip-path: circle(50%);
}
.two img {
  clip-path: ellipse(60% 50%);
}
.three img {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.four img {
  clip-path: path("M150 0 L75 200 L225 200 Z");
}
</style>
</head>
<body>

<div class="one">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>

<div class="two">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>


<div class="three">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>

<div class="four">
<img src="https://lenadesign.org/wp-content/uploads/2021/05/bike-animation.jpg" width="200" height="200" alt="cyclist"></div>

</body>
</html>

Output:

Circle:

cyclist

Ellipse:

cyclist

Polygon:

cyclist

SVG Path:

cyclist

Enjoy coding!