The clip-path
CSS property enables the creation of a clipping region that determines which part of an element should be visible. Elements inside this region are displayed, while those outside are hidden.
Syntax:
clip-path: none;
clip-path: url(resources.svg#c1);
clip-path: margin-box | border-box | padding-box | content-box | fill-box | stroke-box | view-box;
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");
clip-path: rect(5px 5px 160px 145px round 20%);
clip-path: xywh(0 5px 100% 75% round 15% 0);
clip-path: padding-box circle(50px at 0 100px);
clip-path: inherit | initial | revert | revert-layer | unset;
Values:
-
<clip-source>
: A URL referencing an SVG<clipPath>
element. -
<basic-shape>
: Defines a shape whose size and position are determined by the<geometry-box>
value. -
<geometry-box>
: Defines the reference box for the basic shape or the edges of the specified box for clipping.
Usage:
- Creating Clipping Paths: Using various shapes like circles, ellipses, rectangles, or custom paths, developers can define clipping paths to control which parts of elements are visible.
-
Visual Effects:
clip-path
can be used to create various visual effects, such as rounded corners or irregular shapes, by clipping elements accordingly.
Simple instance for tooltip creation
Conclusion:
The clip-path
property is a powerful tool in CSS for controlling the visibility of elements by defining clipping regions. By using different shapes and reference boxes, developers can create visually appealing layouts and design effects. Understanding how to utilize clip-path
effectively can enhance the aesthetics and user experience of web applications and interfaces.
Generate your own with Clippy
Top comments (0)