How to create an irregular square shape in css?

问题:

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

Any help much appreciated!

回答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>

回答2:

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>

回答3:

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