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>

Answer 2

you can use:

clip-path: polygon(30px 0 , 250px 0, 200px 300px, 0 0);

Please see the example here: https://codepen.io/shakogele/pen/ZMZGGK

Answer 3

You can do it with some rotation and perspective:

.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}

<div class="box">
</div>

Or using SVG:

<svg viewBox="0 0 200 200" width=200>
  <polygon points="20,0 150,20 170,130 0,150" fill="#f540a8" /> 
</svg>

And also using gradient (but without transparency):

.box {
  width: 150px;
  height: 120px;
  background: 
    linear-gradient(to top right, transparent 46%,#fff 50%) right/10px 100%,
    linear-gradient(to top right, transparent 46%,#fff 50%) top/100% 10px,
    linear-gradient(to bottom right, transparent 46%,#fff 50%) bottom/100% 10px,
    linear-gradient(to top left, transparent 46%,#fff 50%) left/10px 100%, 
    #f540a8;
  background-repeat:no-repeat;
  margin: 20px;
}

<div class="box">
</div>