CSS Clip Path Generator

XX = 50px , Y = 0pxXX = 450px , Y = 0pxXX = 500px , Y = 50pxXX = 500px , Y = 450pxXX = 450px , Y = 500pxXX = 50px , Y = 500pxXX = 0px , Y = 450pxXX = 0px , Y = 50px

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);