CSS clip-path Property

The **clip-path **property of CSS is used to clip the particular section of the image such that part of image inside the section are shown and part of image outside the section are not shown.

Syntax:

clip-path: <clip-source> | <basic-shape> | none;

Property value:

**: **It includes some shapes like circle, rectangle, ellipse etc that clips the given image.
none: It includes no clipping.
: The clipping part is taken from another HTML element.

Example 1: It includes some shapes.

HTML

filter_none

edit

play_arrow

brightness_4

<!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:

Example 2: clip-path:none; It includes no clipping.

HTML

filter_none

edit

play_arrow

brightness_4

<!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>

#css #web technologies #css-properties