How to create an irregular square shape in css?

Question

Looking for the code to make this particular shape with CSS..

Any help much appreciated!

Answer 1

You can use clip-path.

The clip-path CSS property creates a clipping region that defines what part of an element should be displayed. More specifically, those portions that are inside the region are shown, while those outside are hidden.

Try this code snippet.

div{
   width: 150px;
   height: 150px;
   -webkit-clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
   clip-path: polygon(5% 7%, 91% 14%, 98% 91%, 0% 100%);
   background: pink;
}

<div></div>