如何在CSS中创建不规则正方形？

Question

正在寻找使用CSS制作这种特殊形状的代码。

任何帮助，不胜感激！

Answer 1

您可以进行一些旋转和透视操作：

<button onclick="this.focus()">Button</button>

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

或使用SVG：

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

还使用渐变（但没有透明度）：

<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;
}

Answer 2

您可以使用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>

Answer 3

您可以使用：

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

请在此处查看示例：https://codepen.io/shakogele/pen/ZMZGGK