So erstellen Sie einige gängige unregelmäßige CSS3-Formen

Unregelmäßiges CSS3-Grafikdesign wird im modernen Webseitendesign immer beliebter. Das Erstellen unregelmäßiger Designs ist immer einfacher geworden und kann ohne Verwendung von JavaScript oder Back-End-Skripten durchgeführt werden. Diese Implementierung wird als CSS3-Unregelmäßigkeit bezeichnet.

Der Vorteil von CSS3 Irregulär ist seine Flexibilität und Reaktionsfähigkeit. Wir können perfekt responsive Seiten für verschiedene Geräteauflösungen erstellen. Darüber hinaus kann ein gutes unregelmäßiges Design Ihrer Website einen einzigartigen Stil verleihen.

CSS3 Unregelmäßige Formen lassen sich ganz einfach erstellen. Schneiden Sie einfach die gewünschte Form aus und fügen Sie Farbe hinzu oder verwenden Sie ein Hintergrundbild, um sie attraktiver aussehen zu lassen.

Jetzt schauen wir uns an, wie man einige gängige unregelmäßige CSS3-Formen erstellt.

1. Dreieck

Dreieck ist eine der grundlegendsten Formen in unregelmäßigen CSS3-Grafiken. Es kann mit folgendem Code erstellt werden:

.triangle {
  width: 0;
  height: 0;
  border-top: 50px solid #007bff;
  border-left: 50px solid transparent;
}

2. Trapezoid

Ein Trapez ist ebenfalls eine einfache Form, ähnlich einem Dreieck. Aber im Gegensatz zu einem Dreieck hat ein Trapez zwei kurze Seiten und zwei lange Seiten.

.trapezoid {
  height: 0;
  width: 100px;
  border-top: 50px solid #007bff;
  border-bottom: 50px solid #007bff;
  border-left: 25px solid transparent;
  border-right: 25px solid transparent;
}

3. Parallelogramm

Ein Parallelogramm ist eine einfache unregelmäßige Form, die mit dem folgenden Code erstellt werden kann:

.parallelogram {
  width: 150px;
  height: 100px;
  transform: skew(20deg);
  background-color: #007bff;
}

4. Oval

Oval ist eine weitere unregelmäßige CSS3-Form, die mit dem folgenden Code erstellt werden kann:

.ellipse {
  width: 100px;
  height: 50px;
  border-radius: 50%;
  background-color: #007bff;
}

5. Polygon

Mit dem folgenden Code können wir einen fünfzackigen Stern erstellen:

.star {
  height: 0;
  width: 0;
  border-right: 50px solid transparent;
  border-bottom: 50px solid #007bff;
  border-left: 50px solid transparent;
  transform: rotate(35deg);
}

.star:before {
  height: 0;
  width: 0;
  margin: -50px 0 0 -25px;
  content: "";
  position: absolute;
  border-right: 25px solid transparent;
  border-bottom: 30px solid #fff;
  border-left: 25px solid transparent;
  transform: rotate(-35deg);
}

.star:after {
  width: 0;
  height: 0;
  margin: -20px 0 0 -10px;
  content: "";
  position: absolute;
  border-right: 10px solid transparent;
  border-bottom: 12px solid #007bff;
  border-left: 10px solid transparent;
  transform: rotate(35deg);
}

Zusammenfassung

CSS3 Unregelmäßiges Grafikdesign ist nicht schwierig. Mit den richtigen Werkzeugen und einigen Grundkenntnissen ist es einfach, einfache Formen zu erstellen. Bei der Gestaltung von Webseiten kann unregelmäßiges Grafikdesign der Seite einen einzigartigen Stil verleihen und so zu einer besseren Benutzererfahrung auf unserer Website führen.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie einige gängige unregelmäßige CSS3-Formen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!