width: 200px;
height: 200px;

width: 200px;
height: 200px;

box-shadow: 10px 10px 10px red;
border: 2px solid blue;

/* der clip-path wird auf der Element gelegt
   – mit exakt der gleichen Größe, die das ELement hat! –
   und beschneidet dann das Element */

width: 200px;
height: 200px;

box-shadow: 10px 10px 10px red;
border: 2px solid blue;

clip-path: polygon(86% 12%, 89% 28%, 91% 53%, 93% 66%, 123.33% 92.22%, 85% 90%, 74% 100%, 65% 100%, 55.45% 118.14%, 39% 100%, 29% 88%, 1.94% 92.65%, 21% 63%, 5.08% 57.49%, 11.27% 41.71%, 51% 43%, 47% 34%, 28% 27%, 18% 25%, 28% 14%, 40% 13%, 57% 7%, 62% 1%, 65% 0%, 71% 0%, 77% 0%);

/* ändert sich die Höhe des Elements (height: 50px),
   dann ändert sich entsprechend auch die Höhe der Maske / des clip-path */

width: 200px;
height: 50px;

clip-path: polygon(86% 12%, 89% 28%, 91% 53%, 93% 66%, 123.33% 92.22%, 85% 90%, 74% 100%, 65% 100%, 55.45% 118.14%, 39% 100%, 29% 88%, 1.94% 92.65%, 21% 63%, 5.08% 57.49%, 11.27% 41.71%, 51% 43%, 47% 34%, 28% 27%, 18% 25%, 28% 14%, 40% 13%, 57% 7%, 62% 1%, 65% 0%, 71% 0%, 77% 0%);

width: 300px;
height: 50px;

clip-path: polygon(86% 12%, 89% 28%, 91% 53%, 93% 66%, 123.33% 92.22%, 85% 90%, 74% 100%, 65% 100%, 55.45% 118.14%, 39% 100%, 29% 88%, 1.94% 92.65%, 21% 63%, 5.08% 57.49%, 11.27% 41.71%, 51% 43%, 47% 34%, 28% 27%, 18% 25%, 28% 14%, 40% 13%, 57% 7%, 62% 1%, 65% 0%, 71% 0%, 77% 0%);