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:
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:
Ellipse:
Polygon:
SVG Path:
Enjoy coding!
Read also: