Reines CSS zum Erreichen einer einzelnen Div-Transformation eines regulären Polygons

Im vorherigen Artikel haben wir vorgestellt, wie man mit den Pseudoelementen „vorher“ und „nachher“ Schaltflächen im Material Design-Stil erstellt. Die Schlüsseltechnologie besteht darin, die Rahmenbreite sowie die Breite und Höhe des Div-Körpers gut zu nutzen. Daher wird in diesem Artikel ein weiterer Effekt hinzugefügt, bei dem CSS verwendet wird, um ein „einzelnes“ Div von einem regelmäßigen Dreieck in ein regelmäßiges Achteck umzuwandeln (ein einzelnes Div kann höchstens ein regelmäßiges Achteck sein) und schließlich der Animationseffekt verwendet wird, um es in eine Animation zur Transformation eines regelmäßigen Polygons umzuwandeln. Da regelmäßige Polygone viele trigonometrische Funktionsberechnungen erfordern, werden die Seiten regelmäßiger Polygone der Einfachheit halber hier einheitlich auf 100 Pixel festgelegt.

Gleichseitiges Dreieck

Ein gleichseitiges Dreieck benötigt keine Pseudoelemente. Es kann durch Festlegen der Rahmenbreite des Div selbst erstellt werden. Schauen wir uns zunächst die Seitenlänge und die Mittellinie des gleichseitigen Dreiecks an. Wenn die Seitenlänge 100px beträgt, wird die Mittellinie auf 87px gerundet (100 x sin (60) = 87).

Daher müssen wir die Länge und Breite des Div auf 0 setzen, dann die Breite des unteren Rahmens auf 87 Pixel und die Breite des linken und rechten Rahmens auf 50 Pixel setzen (die Farbe ist auf transparent gesetzt), und wir können ein schönes Dreieck erstellen.

Breite: 0;
Höhe: 0;
Rahmenbreite: 0 50px 87px;
Rahmenstil: durchgezogen;
Rahmenfarbe: transparent transparent #095; 

Quadrat

Ein Quadrat sollte am einfachsten sein. Stellen Sie einfach Länge und Breite auf den gleichen Wert ein. Es gibt jedoch tatsächlich zwei weitere Methoden. Die erste besteht darin, Länge und Breite auf 0 und die oberen, unteren, linken und rechten Ränder auf 50 Pixel einzustellen. Die zweite besteht darin, die Höhe auf 0, die Breite auf 100 Pixel und dann die Breite einer Seite auf 100 einzustellen. Beides ist möglich.

.A{
Breite: 100px;
Höhe: 100px;
Hintergrund: #c00;
}
.B{
Breite: 0;
Höhe: 0;
Rahmenbreite: 50px;
Rahmenstil: durchgezogen;
Rahmenfarbe: #095;
}
.C{
Breite: 100px;
Höhe: 0;
Rahmenbreite: 0 0 100px;
Rahmenstil: durchgezogen;
Rahmenfarbe: #069;
} 

Regelmäßiges Fünfeck

Für ein regelmäßiges Fünfeck müssen wir grundlegende trigonometrische Funktionen verwenden. Lassen Sie uns zunächst das regelmäßige Fünfeck zerlegen, das ursprüngliche Div als oberes Dreieck verwenden und dann ein Pseudoelement verwenden, um das untere Trapez zu erstellen. Da der Winkel zwischen den Seiten des regelmäßigen Fünfecks 108 Grad beträgt, können wir trigonometrische Funktionen verwenden, um zu berechnen, dass die Höhe des oberen Dreiecks 59px (100 x cos (54)) und die Breite 192px (100 x sin (54) x 2) beträgt. Die Höhe des unteren Trapezes beträgt 95px (100 x sin (72)) und die Breite der langen Seite beträgt 192px, genau wie beim oberen Dreieck.

Nachdem Sie das Prinzip verstanden haben, können Sie Pseudoelemente verwenden, um es anzupassen und zu erzeugen!

.A{
      Position: relativ;
  Breite: 0;
  Höhe: 0;
  Rahmenbreite: 0 81px 59px;
      Rahmenstil: durchgezogen;
  Rahmenfarbe: transparent transparent #069;
}
.a:vor{
  Position: absolut;
  Inhalt:"";
  oben: 59px;
  links: -81px;
  Breite: 100px;
  Höhe: 0;
  Hintergrund: keiner;
  Rahmenbreite: 95px 31px 0;
  Rahmenstil: durchgezogen;    
  Rahmenfarbe: #069 transparent transparent;
    }

Regelmäßiges Sechseck

Jeder Winkel eines regelmäßigen Sechsecks beträgt 120 Grad. Wenn wir es aus einer rein CSS-Perspektive betrachten, können wir ein regelmäßiges Sechseck erstellen, indem wir das Dreieck in das regelmäßige Fünfeck umwandeln. Das heißt, es wird eine Kombination aus zwei Trapezen. Die lange Seite des Trapezes beträgt 200px (100 x cos(60) x 2 + 100) und die Höhe des Trapezes beträgt 87px (100 x sin(60)).

Sie können also ein regelmäßiges Sechseck erstellen, indem Sie das CSS des regelmäßigen Fünfecks leicht ändern.

.A{
      Position: relativ;
    Breite: 100px;
    Höhe: 0;
    Rahmenbreite: 0 50px 87px;
      Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent #f80;
}
.a:vor{
  Position: absolut;
  Inhalt:"";
    oben: 87px;
    links: -50px;
    Breite: 100px;
    Höhe: 0;
  Hintergrund: keiner;
    Rahmenbreite: 87px 50px 0;
  Rahmenstil: durchgezogen;    
    Rahmenfarbe: #f80 transparent transparent;
    } 

Regelmäßiges Siebeneck

Beginnend mit dem regulären Siebeneck müssen Sie das nachfolgende Pseudoelement verwenden, da das reguläre Siebeneck in drei Speicherblöcke aufgeteilt werden muss, wobei das ursprüngliche Div als oberes Dreieck, ein Pseudoelement als mittleres Trapez und ein weiteres Pseudoelement als unteres Trapez verwendet werden. Der Winkel des regulären Siebenecks ist etwas Besonderes. Er ist keine Ganzzahl, sondern 128 und 4/7 Grad. Die zweite Dezimalstelle beträgt ungefähr 128,57, sodass das Berechnungsergebnis wie in der folgenden Abbildung dargestellt ist. Der entscheidende Punkt ist, dass Sie die Länge und Breite genau kennen müssen.

Nachdem Sie Länge und Breite haben, können Sie mit dem Schreiben mit CSS beginnen!

.A{
      Position: relativ;
    Breite: 0;
    Höhe: 0;
    Rahmenbreite: 0 90px 43px;
      Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent #09c;
}
.a:vor{
  Position: absolut;
  Inhalt:"";
    oben: 140px;
    links: -112px;
    Breite: 100px;
    Höhe: 0;
    Rahmenbreite: 78px 62px 0;
  Rahmenstil: durchgezogen;    
    Rahmenfarbe: #09c transparent transparent;
    }
  .a:nach{
    Position: absolut;
    Inhalt:"";
    oben: 43px;
    links: -112px;
    Breite: 180px;
    Höhe: 0;
    Rahmenbreite: 0 22px 97px;
    Hintergrund: keiner;
    Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent #09c;
  } 

Regelmäßiges Achteck

Ein regelmäßiges Achteck entsteht eigentlich dadurch, dass man das Dreieck auf einem regelmäßigen Siebeneck in ein Trapez verwandelt und dann das Trapez in der Mitte in ein Rechteck verwandelt. Der Winkel des regelmäßigen Achtecks ​​beträgt 135 Grad, und die berechneten Längen und Breiten der einzelnen Flächen sind in der Abbildung unten dargestellt.

Wenn Sie dasselbe Prinzip verstehen, wird es mit CSS viel einfacher sein!

.A{
      Position: relativ;
    Breite: 100px;
      Höhe: 0;
      Rahmenbreite: 0 71px 71px;
      Rahmenstil: durchgezogen;
    Rahmenfarbe: transparent transparent #f69;
}
.a:vor{
  Position: absolut;
  Inhalt:"";
    oben: 171px;
      links: -71px;
      Breite: 100px;
      Höhe: 0;
      Rahmenbreite: 71px 71px 0;
  Rahmenstil: durchgezogen;    
      Rahmenfarbe: #f69 transparent transparent;
    }
  .a:nach{
      Position: absolut;
      Inhalt:"";
      oben: 71px;
      links: -71px;
      Breite: 242px;
      Höhe: 0;
      Rahmenbreite: 0 0 100px;
      Hintergrund: keiner;
      Rahmenstil: durchgezogen;
      Rahmenfarbe: transparent transparent #f69;
  } 

Zusammenfassung

Oben sehen Sie eine reguläre Polygontransformation eines einzelnen Divs, die ausschließlich mit CSS erstellt wurde. Wenn Sie geschickt sind, können Sie tatsächlich Animationseffekte hinzufügen, um eine Transformationsanimation wie im folgenden Beispiel zu erstellen! Das folgende Beispiel verwendet jedoch ein anderes Div, um es außen einzuschließen und die Größentransformationsanimation auszuführen, um die durch die Größentransformation verursachten losen Verbindungen zu vermeiden. Sie können darauf verweisen!

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.