CSS - clip-path Property

CSS clip-path property defines a clipping regions for elements, which defines the visible area of the element. It allows you to create complex shapes and paths to determine how an element should be clipped or displayed. It is mostly used with images to crop or create interesting shapes.

Applies to

All elements; In SVG, it applies to container elements excluding the <defs> element and all graphics elements.

Syntax

Let's check all the possible available syntax to set values to property clip-path.

Keyword Values

clip-path: none;

<clip-source> Value

clip-path: url(resources.svg#c1);

<geometry-box> Values

clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

<basic-shape> Values

clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
   "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

CSS clip-path - <clip-source> Value

You can use SVG path commands to create complex clipping paths. This provides great flexibility in defining shapes. The following example demonstrates this −

<html>
<head>
<style>
   #clip-img {
      clip-path: url("#clip-img")
   }
</style>
</head>
<body>
   <h4>Without clipping</h4>
   <img height="200" width="200" src="images/tree.jpg">
   <svg height="0" width="0">
      <clipPath id="clip-img">
         <rect y="80" x="130" width="80" height="80" />
         <rect x="60" y="130" width="80" height="80" />
         <rect x="130" y="200" width="80" height="80" />
         <rect x="200" y="130" width="80" height="80" />
      </clipPath>
   </svg>
   <h4>With clipping</h4>
   <img id="clip-img" height="200" width="200" src="images/tree.jpg">
</body>
</html>

CSS clip-path - <geometry-box> Value

If clip-path is set with <geometry-box> value in combination with a <basic-shape>, it defines the reference box for the basic shape. The following example demonstrates how to use clip-path: <geometry-box> property −

This value may not be supported by all browsers.
<html>
<head>
<style>
      html,
      body {
         height: 100%;
         box-sizing: border-box;
         background: #eee;
      }
      .row {
         display: flex;
         flex: 1 auto;
         flex-direction: row;
         flex-wrap: wrap;
      }
      .cell {
         margin: 0.5em;
         padding: 0.5em;
         background-color: #fff;
         overflow: hidden;
         text-align: center;
         flex: 1;
      }
      .note {
         background: grey;
         padding: 1em;
         margin: 0.5em 0.5em 0;
         font: 0.8em sans-serif;
         text-align: left;
         white-space: nowrap;
      }
      .note + .row .cell {
         margin-top: 0;
      }
      .container {
         display: inline-block;
         border: 1px dotted rgb(138, 26, 26);
         position: relative;
      }
      .container::before {
         content: "margin";
         position: absolute;
         top: 2px;
         left: 2px;
         font: italic 0.6em sans-serif;
      }
      .cell span {
         display: block;
         margin-bottom: 0.5em;
      }
      p {
         font-family: sans-serif;
         background: #000;
         color: rgb(110, 109, 195);
         margin: 2em;
         padding: 3em 1em;
         border: 1em solid rgb(143, 19, 225);
         width: 6em;
      }
      .box1 {
         clip-path: circle(25%);
      }
      .box3{
         clip-path: fill-box circle(25% at 25% 25%);
      }
      .box4 {
         clip-path: stroke-box circle(25% at 25% 25%);
      }
      .box5 {
         clip-path: view-box circle(25% at 25% 25%);
      }
      .box6 {
         clip-path: margin-box circle(25% at 25% 25%);
      }
      .box7 {
         clip-path: border-box circle(25% at 25% 25%);
      }
      .box8 {
         clip-path: padding-box circle(25% at 25% 25%);
      }
      .box9 {
         clip-path: content-box circle(25% at 25% 25%);
      }
</style>
</head>
<body>
      <div class="note">clip-path: circle(25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="shape1">Happy <br /><em>clipping</em></p>
            </div>
         </div>
      </div>

      <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="box3">Happy<br /><em>clipping</em></p>
            </div>
         </div>
      </div>
      <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
         <div class="row">
            <div class="cell">
                  <span>HTML</span>
                  <div class="container">
                     <p class="box4">Happy<br /><em>clipping</em></p>
                  </div>
            </div>
         </div>
      <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="box5">Happy<br /><em>clipping</em></p>
            </div>
      </div>
      </div>
      <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="box6">Happy<br /><em>clipping</em></p>
            </div>
         </div>
      </div>
      <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="box7">Happy<br /><em>clipping</em></p>
            </div>
         </div>
      </div>
      <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="box8">Happy<br /><em>clipping</em></p>
            </div>
         </div>
      </div>
      <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
      <div class="row">
         <div class="cell">
            <span>HTML</span>
            <div class="container">
                  <p class="box9">Happy<br /><em>clipping</em></p>
            </div>
         </div>
      </div>
</body>
</html>

CSS clip-path - Basic Shapes

The following example demonstrates how to use the clip-path: <basic-shape> property to define a clipping region for an element using a basic shape, such as a circle, ellipse, or polygon −

<html>
<head>
<style>
   .image-container {
      display: flex;
   }
   .clip-inset {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: inset(10% 10% 10% 10% round 10% 10% 10% 10%);
   }
   .clip-circle {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: circle(40%);
   }
   .clip-ellipse {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: ellipse(100px 50px at 100px 100px);
   }
   .clip-ploygon {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path: polygon(0 50%, 100% 50%, 50% 100%, 50% 0);
   }
   .clip-path {
      width: 100px;
      height: 100px;
      margin: 10px;
      clip-path:  path('M 100 100 L 0, 50 L 150,50 z');
   }
</style>
</head>
<body>
   <div class="image-container">
      <h3>Inset</h3>
      <img src="images/tree.jpg" class="clip-inset">
   </div>
   <div class="image-container">
      <h3>Circle</h3>
      <img src="images/tree.jpg" class="clip-circle">
   </div>
   <div class="image-container">
      <h3>Ellipse</h3>
      <img src="images/tree.jpg" class="clip-ellipse">
   </div>
   <div class="image-container">
      <h3>Ploygon</h3>
      <img src="images/tree.jpg" class="clip-ploygon"> 
   </div>
   <div class="image-container">
      <h3>Path</h3>
      <img src="images/tree.jpg" class="clip-path">
   </div>
</body>
</html>
Advertisements