Loading Please Wait...
The CSS clip-path property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. Thus allowing us to create different shapes.
Defines an inset rectangle.
clip-path: inset(30px);
clip-path: inset(1rem 2rem 3rem 4rem);
clip-path: inset(20% 30% round 20px);
clip-path: inset(4rem 20% round 1rem 2rem 3rem 4rem);
Defines a circle using a radius and a position.
clip-path: circle(50px);
clip-path: circle(6rem at right center);
clip-path: circle(10% at 2rem 90%);
clip-path: circle(closest-side at 5rem 6rem);
clip-path: circle(farthest-side);
Defines an ellipse using two radii and a position.
clip-path: ellipse(20px 50px);
clip-path: ellipse(4rem 50% at right center);
clip-path: ellipse(closest-side closest-side at 5rem 6rem);
clip-path: ellipse(closest-side farthest-side);
Defines a polygon using an SVG filling rule and a set of vertices.
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
Defines a shape using an optional SVG filling rule and an SVG path definition.
clip-path: path('M 20 240 \ L 20 80 L 160 80 \ L 160 20 L 280 100 \ L 160 180 L 160 120 \ L 60 120 L 60 240 Z')
clip-path: path('M 20 240 \ C 20 0 300 0 300 240 Z');
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");
/* Keyword values */
clip-path: none;
/* clip-sourc> values */
clip-path: url(resources.svg#c1);
/* geometry-bo> 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;
/* Box and shape values combined */
clip-path: padding-box circle(50px at 0 100px);
/* Global values */
clip-path: inherit;
clip-path: initial;
clip-path: revert;
clip-path: revert-layer;
clip-path: unset;
div {
width: 300px;
height: 300px;
background: repeating-linear-gradient(red, orange 50px);
clip-path: polygon(
50% 0%,
60% 40%,
100% 50%,
60% 60%,
50% 100%,
40% 60%,
0% 50%,
40% 40%
);
animation: 4s poly infinite alternate ease-in-out;
margin: 10px auto;
}
@keyframes poly {
from {
clip-path: polygon(
50% 0%,
60% 40%,
100% 50%,
60% 60%,
50% 100%,
40% 60%,
0% 50%,
40% 40%
);
}
to {
clip-path: polygon(
50% 30%,
100% 0%,
70% 50%,
100% 100%,
50% 70%,
0% 100%,
30% 50%,
0% 0%
);
}
}
How you feel about this blog:
Share this blog on:
If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com
Contact Us
We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..
Copyright © , Lynxsia IT Solutions, All rights reserved