How to use CSS to achieve Chinese knot effect (code)

This article brings you the content is about how to use CSS to achieve Chinese knot effect (code), there is a certain reference value, the need for friends can refer to, I hope to help you.

Today, I would like to share with you a tutorial on using CSS to draw Chinese knots.
The final effect is as follows:

First of all, we define the structure needed to draw the Chinese knot:

<div class="knot">

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

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

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

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

</div>

Then start writing the style and let the Chinese Knot center the display:

body {

  margin: 0;

  padding: 0;

  height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

}

Set the container style for Chinese knots:

.knot {

  box-sizing: border-box;

  font-size: 100px;

  width: 2em;

  height: 1.6em;

  background: skyblue;

  display: flex;

  align-items: center;

  justify-content: center;

}

I split the base style of the Chinese knot into 4 rectangles, first defining the basic style of the rectangle:

.box {

  position: absolute;

  box-sizing: border-box;

  width: 1em;

  height: 0.4em;

  border: var(--b) solid firebrick;

  --b: 0.1em;

}

Then we'll adjust the style of each rectangle and combine them into the base of the knot:

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

}

Finally, we use the pseudo-elements of the first and second rectangles to draw the remaining two small circles:

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

}