Wie man CSS verwenden, um die Wirkung der chinesischen Knoten (Code)

Heute möchte ich mit Ihnen teilen eine Tutorial um chinesische Knoten mit CSS zu zeichnen.
Das endgültige Ergebnis ist wie folgt:

Zunächst definieren wir die Struktur benötigt, um chinesische Knoten zu ziehen:

<div class="knot">    <span class="box"></span>    <span class="box"></span>    <span class="box"></span>    <span class="box"></span></div>

Dann starten Sie Schreibstile, so dass der chinesischen Knoten zentriert ist:

body {  margin: 0;  padding: 0;  height: 100vh;  display: flex;  align-items: center;  justify-content: center;}

Legen Sie den Container-Stil für den chinesischen Knoten:

.knot {  box-sizing: border-box;  font-size: 100px;  width: 2em;  height: 1.6em;  background: skyblue;  display: flex;  align-items: center;  justify-content: center;}

Ich in 4 Rechtecke, die basic-Style der chinesischen Knoten aufgeteilt zunächst definieren die Basisformatvorlage des Rechtecks:

.box {  position: absolute;  box-sizing: border-box;  width: 1em;  height: 0.4em;  border: var(--b) solid firebrick;  --b: 0.1em;}

Dann lassen Sie uns den Stil jedes Rechteck anpassen und kombinieren Sie diese in das grundlegende Aussehen eines Knotens:

.knot .box:nth-child(1) {  transform: rotate(45deg) translate(-15%, -38%);  border-radius: 20% 0% 0% 20% / 50% 0 0 50%;}.knot .box:nth-child(2) {  transform: rotate(45deg) translate(15%, 37%);  border-radius: 0% 20% 20% 0% / 0% 50% 50% 0%;}.knot .box:nth-child(3) {  transform: rotate(-45deg) translate(15%, -38%);  border-radius: 0% 20% 20% 0% / 0% 50% 50% 0%;}.knot .box:nth-child(4) {  transform: rotate(-45deg) translate(-15%, 37%);  border-radius: 20% 0% 0% 20% / 50% 0 0 50%;}

Schließlich verwenden wir die Pseudo-Elemente der ersten und zweiten Rechtecke, um die restlichen zwei kleine Kreise zu ziehen:

.knot .box:nth-child(1)::after {  box-sizing: border-box;  content: '';  position: absolute;  width: 0.4em;  height: 0.4em;  border: var(--b) solid firebrick;  border-radius: 50% 50% 50% 0%;  top: -0.4em;  right: -0.4em;}.knot .box:nth-child(2)::after {  box-sizing: border-box;  content: '';  position: absolute;  width: 0.4em;  height: 0.4em;  border: var(--b) solid firebrick;  border-radius: 50% 0% 50% 50%;  top: 0.2em;  right: 0.8em;}