CSS Clip Path Generator

XX = 50px , Y = 0pxLockXX = 450px , Y = 0pxLockXX = 500px , Y = 50pxLockXX = 500px , Y = 450pxLockXX = 450px , Y = 500pxLockXX = 50px , Y = 500pxLockXX = 0px , Y = 450pxLockXX = 0px , Y = 50pxLock

Width

Height

New Point

Background Color

X - Position
(max value : 500)

Y - Position
(max value : 500)

Add next to point

Add before point

Feedback

Pixel Value
clip-path: polygon( 50px 0px, 450px 0px, 500px 50px, 500px 450px, 450px 500px, 50px 500px, 0px 450px, 0px 50px);

Percentage Value
clip-path: polygon( 10.00% 0.00%, 90.00% 0.00%, 100% 10.00%, 100% 90.00%, 90.00% 100%, 10.00% 100%, 0.00% 90.00%, 0.00% 10.00% );

Dynamic Responsive Value ( Only this code working for lock position )
clip-path: polygon(50px 0px, calc( 100% - 50px) 0px, 100% 50px, 100% calc( 100% - 50px), calc( 100% - 50px) 100%, 50px 100%, 0px calc( 100% - 50px), 0px 50px);