CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



clip-path

CSS clip-path is a property that allows you to clip an element to a specific shape or path. This can be useful for creating unique and interesting designs, such as non-rectangular shapes or cut-out effects. The clip-path property is supported in most modern browsers, including Chrome, Firefox, Safari, and Edge.

The clip-path property takes a value that specifies the shape or path to clip the element to. This value can be specified using a variety of methods, including basic shapes, SVG paths, and even images. Let's take a look at some examples:

Basic Shapes

One of the simplest ways to use clip-path is with basic shapes. The following code will clip an element to a circle:

<div style="clip-path: circle(50%);">
  This element is clipped to a circle.
</div>

You can also use other basic shapes, such as rectangles, ellipses, and polygons:

<div style="clip-path: rectangle(0, 0, 200px, 200px);">
  This element is clipped to a rectangle.
</div>

<div style="clip-path: ellipse(50% 50% at 50% 50%);">
  This element is clipped to an ellipse.
</div>

<div style="clip-path: polygon(0 0, 100% 0, 100% 50%, 50% 100%, 0 50%);">
  This element is clipped to a polygon.
</div>

SVG Paths

You can also use SVG paths to create more complex shapes. The following code will clip an element to a heart shape:

<div style="clip-path: path('M50 0 A50 50 0 0 0 0 50 A50 50 0 0 0 50 100 A50 50 0 0 0 100 50 A50 50 0 0 0 50 0 Z');">
  This element is clipped to a heart shape.
</div>

SVG paths can be created using a variety of tools, such as Adobe Illustrator or Inkscape. You can also find pre-made SVG paths online, such as on the W3Schools SVG Path Reference.

Images

You can even use images as the clip-path value. The following code will clip an element to the shape of a star:

<div style="clip-path: url(star.svg);">
  This element is clipped to the shape of a star.
</div>

The image used for the clip-path value can be any image format supported by the browser, such as PNG, JPEG, or SVG.

Overall, the clip-path property is a powerful tool for creating unique and interesting designs in CSS. Whether you're using basic shapes, SVG paths, or images, there are endless possibilities for creating custom clip paths.

References

Activity