Как создать неправильную квадратную форму в CSS?

Question

Ищем код для создания этой конкретной фигуры с помощью CSS ..

Любая помощь очень ценится!

Answer 1

вы можете использовать:

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

Пожалуйста, посмотрите пример здесь: https://codepen.io/shakogele/pen/ZMZGGK

Answer 2

Вы можете сделать это с некоторым поворотом и перспективой:

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

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

Или с использованием SVG:

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

А также с использованием градиента (но без прозрачности):

.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>

Answer 3

Вы можете использовать clip-path .

Свойство clip-path CSS создает область отсечения, которая определяет, какая часть элемента должна отображаться.Более конкретно, показаны те части, которые находятся внутри региона, а те, которые снаружи, скрыты.

Попробуйте этот фрагмент кода.

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>