How to Create This Specific Irregular Square Shape with CSS?

Creating Irregular Square Shapes with CSS

Question:

How to create this specific irregular square shape with CSS?

Image example:

Answer:

Rotation and perspective effects can be used To create this irregular shape:

<code class="css">.box {
  width: 150px;
  height: 120px;
  background: #f540a8;
  margin: 20px;
  transform: perspective(180px) rotateX(15deg) rotateY(20deg) rotateZ(-3deg);
}</code>

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

The above is the detailed content of How to Create This Specific Irregular Square Shape with CSS?. For more information, please follow other related articles on the PHP Chinese website!