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

Question

正在寻找使用 CSS 制作此特定形状的代码..

非常感谢任何帮助！

Answer 1

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

试试这个代码片段。

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

您可以使用：

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

请看这里的例子：https://codepen.io/shakogele/pen/ZMZGGK

Answer 3

你可以做一些旋转和透视：

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

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

How to create an irregular square shape in css?

css

css-shapes