CSS clip-path Property - GeeksforGeeks

22 Oct, 2021
The clip-path property of CSS is used to clip the particular section of the image such that part of the image inside the section is shown and part of the image outside the section is not shown.
Syntax:
clip-path: <clip-source> | <basic-shape> | none;
Property value:  All the properties are described well with the example below.
<basic-shapes>: It includes some shapes like circles, rectangles, ellipse, etc that clips the given image.
Example 1: This example displays the basic use of the clip-path property to insert the specific shapes that clip the given image.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"          content="width=device-width,                   initial-scale=1.0">    <style>    #img {        margin-bottom: 20px;        clip-path: circle(40%);    }         #img1 {        margin-bottom: 20px;        clip-path: ellipse(115px 55px at 50% 40%);    }         #img2 {        margin-bottom: 20px;        clip-path: polygon(50% 20%, 90% 80%, 10% 80%)    }         #img3 {        margin-bottom: 20px;        clip-path: inset(22% 12% 15px 35px)    }         div {        float: left;    }    </style></head> <body>     <p>Without clipping</p>          <img height="200"             width="200"             src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">     <p>With clipping</p>     <div>        <img id="img"             height="200"             width="200"             src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">       <img id="img1"            height="200"            width="200"            src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">       <img id="img2"            height="200"            width="200"            src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">       <img id="img3"            height="200"            width="200"            src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">    </div></body></html>
Output:
clip-path: none;: It includes no clipping. This is the default value.
Example 2: This example displays the basic use of the clip-path property where the value is set to none.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"    content="width=device-width,             initial-scale=1.0">    <style>    #img1 {        margin-bottom: 20px;        clip-path: none    }    </style></head> <body>    <div>         <p>Without clipping</p>              <img height="200"                 width="200"                 src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">         <p>With clipping</p>         <div>            <img id="img1"                 height="200"                 width="200"                 src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">        </div>    </div></body></html>
Output:
clip-path: clip-source;: In this, the clipping part is taken from another HTML element that contains either image or element. Element id is used to refer to the element.
Example 3: This example displays the basic use of the clip-path property where the property value is set to a url.
HTML
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport"    content="width=device-width,             initial-scale=1.0">    <style>    #img1 {        margin-bottom: 20px;        clip-path: url("#clip")    }    </style></head> <body>     <p>Without clipping</p>          <img height="200"             width="200"             src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">         <!-- Making a rectangle to clip        rectangle area -->    <svg height="0" width="0">        <clipPath id="clip">            <rect y="100" x="0" width="100" height="100" />            <rect x="100" y="0" width="100" height="100" />        </clipPath>    </svg>     <p>With clipping</p>          <img id="img1"             height="200"             width="200"             src="https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"></body></html>
Output:
Browsers supported:
Firefox 3.5
Edge 12.0 (only supports clip paths defined by url())
Internet Explorer 10.0 (only supports clip paths defined by url())
Opera 42.0
Safari 9.1
Chrome 55.0
bhaskargeeksforgeeks
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to Create Time-Table schedule using HTML ?
Roadmap to Become a Web Developer in 2022
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript