Wie erstelle ich mit CSS eine unregelmäßige quadratische Form?

Erstellung unregelmäßiger quadratischer Formen in CSS

Das Erstellen unregelmäßiger Formen in CSS kann eine herausfordernde Aufgabe sein, ist aber nicht unmöglich. Mit der richtigen Kombination von CSS-Transformationen können Sie einzigartige und auffällige Designs erstellen. In diesem Artikel zeigen wir Ihnen, wie Sie mit CSS eine unregelmäßige quadratische Form erstellen.

Problem:

Wie kann ich diese unregelmäßige quadratische Form mit CSS erstellen?

[Bild einer unregelmäßigen quadratischen Form]

Lösung:

Um eine unregelmäßige quadratische Form zu erstellen, können Sie den folgenden CSS-Code verwenden:

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

Die Eigenschaft Perspektive erstellt einen 3D-Raum, in dem die Transformationen angewendet werden. Die Eigenschaften rotateX, rotateY und rotateZ drehen das Element jeweils um die x-, y- und z-Achse.

Verwendung dieser Transformationen können Sie eine unregelmäßige quadratische Form erstellen, die geneigt und gedreht zu sein scheint. Sie können die Werte der Eigenschaften rotateX, rotateY und rotateZ anpassen, um verschiedene Ausrichtungen und Winkel zu erstellen.

HTML-Struktur :

Um diesen Code zu verwenden, fügen Sie einfach ein

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