CSS clip-path Property
CSS clip-path Property
CSS clip-path
property creates a clipping region that sets what part of an element should be shown.
Note: Parts that are inside the region are shown, while those outside are hidden.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
img{
width: 350px;
height: 200px;
background-color: #fff;
margin-right: 1em;
object-fit: fill;
}
#point{
clip-path: circle(35%);
}
#point1{
clip-path: ellipse(130px 140px at 10% 20%);
}
#point2{
clip-path: inset(10% 52% 0px 27px);
}
#point3{
clip-path: polygon(50% 20%, 90% 80%, 10% 80%);;
}
</style>
</head>
<body>
<h1>CSS clip-path Property</h1>
<h2>clip-path: circle(35%);</h2>
<img id="point" src="emotion.jpg">
<h2>clip-path: ellipse(130px 140px at 10% 20%);</h2>
<img id="point1" src="emotion.jpg">
<h2>clip-path: inset(10% 52% 0px 27px);</h2>
<img id="point2" src="emotion.jpg">
<h2>clip-path: polygon(50% 20%, 90% 80%, 10% 80%);</h2>
<img id="point3" src="emotion.jpg">
</body>
</html>
Syntax
Using CSS
element{
clip-path: inset(10% 52% 0px 27px);
}
Using Javascript
object.style.clipPath="inset(10% 52% 0px 27px)";
Animatable
Yes, clip-path property is animatable. CSS Animatable Properties Reference.
Default Value
Default value for CSS clip-path property is none.
Property Value
The following table provides a list of values for CSS clip-path
property.
Value | Explanation |
---|
clip-source | A url referencing an SVG clipPath element. |
basic-shape | Specifies a basic shape to be used. Possible shapes are- inset()
- circle()
- ellipse()
- polygon()
- path()
|
geometry-box | Specifies a geometry-box to be used. Possible boxes are.- margin-box
- border-box
- padding-box
- content-box
- fill-box
- stroke-box
- view-box
|
none | No clipping path is created. |
Using JavaScript
In the following example, we will demonstrate how to change the CSS clip-path
property of an element using JavaScript.
Example
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
img{
width: 350px;
height: 200px;
background-color: #fff;
clip-path: inset(10% 52% 0px 27px);
}
button{
display: block;
}
</style>
</head>
<body>
<h1>CSS clip-path Property</h1>
<img src="emotion.jpg">
<button onclick="myFunction()">Click Me</button>
<script>
var x = document.getElementsByTagName("img")[0];
function myFunction(){
x.style.clipPath = "inset(10% 9% 0px 175px)";
}
</script>
</body>
</html>
Reminder
Hi Developers, we almost covered 98.7% of CSS Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in CSS.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
Share this Page
Meet the Author