Comment utiliser les CSS pour obtenir l’effet de noeud chinois (code)

Aujourd'hui, je voudrais partager avec vous un tutoriel pour dessiner les noeuds chinois avec CSS.
L’effet final est comme suit :

Tout d’abord, nous définissons la structure nécessaire pour dessiner les noeuds chinois :

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

Ensuite, commencez styles d’écriture afin que le nœud chinois est centré :

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

Définir le style de conteneur pour le noeud chinois :

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

J’ai divisé le style de base du nœud chinois en 4 rectangles, tout d’abord définir le style de base du rectangle :

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

Puis nous allons ajuster le style de chaque rectangle et combinez-les dans le look de base d’un nœud :

.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%;}

Enfin, nous utilisons les éléments pseudo des premiers et deuxième rectangles pour dessiner les deux petits cercles restants :

.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;}