Implement Tai Chi diagram case through CSS

1 Overview

The so-called Tai Chi clarifies the process of the universe from Wuji to Tai Chi, and to the transformation of all things. Among them, Tai Chi refers to the state before heaven and earth were opened and chaos was not divided into yin and yang. Tai Chi also refers to: "One yin and one yang are called Tao" which is the explanation of Tai Chi.
Without further ado, let us first take a look at the shape of the Tai Chi diagram~

It seems difficult at first glance, but in fact it can be achieved through our CSS. We only need to use the rounded border attribute and the radial gradient and linear gradient attributes. , if you are not very familiar with these two attributes, I suggest you first read my previous explanations of Chapters 8 and 9 of CSS. They are explained in more detail and can be understood even by those with no basic knowledge.

2. Ideas

First prepare a square box and divide the box into upper and lower parts. Both parts are set with a radial gradient. One starts with black as the center of the circle, the other starts with white as the center of the circle, and both parts are transparent or white. At the end, two radially gradient black and white rings are formed. Then give it a rounded border attribute to turn it into a round box. Finally, a linear gradient is achieved.
The following is how I complete the Tai Chi diagram based on my ideas:

3. Detailed step-by-step explanation:

1. Prepare a box with a width and height of 350px, set a border, and place it in the center.

.box{ width: 350px; height: 350px; border: 1px solid red; margin: 100px auto; }

2. Set a radial gradient starting from black for the upper part

• Since the side length of this box is 350px, the radius of our radial gradient circle is set to 175px. Then there is the direction of the center of the circle. Obviously, in the horizontal direction, the center of the circle is in the middle, and in the vertical direction, the center of the circle is at 1/4, which is 25%. You can also scroll the mouse on the console to slowly find the appropriate center of the circle. Location.
• The first circle is a radial gradient that starts with black. The black part occupies about 15%, then 15%~50% is white, and finally ends with transparent color.
  background: radial-gradient(175px 175px at 175px 25%,black 15%,white 15%,white 50%,transparent 50%)

The effect picture at this time is:

We found that the 15% to 50% white part in the middle is the same as the transparent color outside. In order to facilitate the distinction, we might as well change the white part in the middle to red that is visible to the naked eye.

background: radial-gradient(175px 175px at 175px 25%,black 15%,red 15%,red 50%,transparent 50%);

Rendering:

3. In the same way, set a radial gradient starting from white for the lower part.

After the first circle is completed, the second one is drawn directly according to the gourd, except that the center position of the circle is moved downward by a radius distance, which is at 3/4, that is, 75%. The middle is a gradient starting from white, and the other Same.

radial-gradient(175px 175px at 175px 75%,white 15%,black 15%,black 50%,transparent 50%);

Rendering:

4. At this time, give the box a rounded border attribute to turn it into a round box.

 border-radius: 50%;

Rendering:

5. Another linear gradient from left to right, starting from white and half to black.

linear-gradient(to right,white 50%,black 50%);

Rendering:

6. Perfect the colors

Finally, in step 2, in order to facilitate the observation of the first radial gradient, replace the white part with red, and then restore it to white, and the Tai Chi diagram is completed.

 background: radial-gradient(175px 175px at 175px 25%,black 15%,white 15%,white 50%,transparent 50%),

Tai Chi finished product:

complete display:

<title>太极图</title>
    <style>
        .box{
      
      
            width: 350px;
            height: 350px;
            border: 1px solid red;
            margin: 100px auto;
            /* 
              1. 两个圆  径向渐变 
              2. 一个线性渐变色
              3. 先写径向 然后在写线性渐变   不容易被覆盖掉

              最后圆角样式: 盒子变为圆形
            */
            border-radius: 50%;
             /* 背景渐变色 */
             background: 
                /* 第一个圆  径向渐变 */
                /* 圆的大小 175(50%)  at: 控制圆心的位置 x轴  y轴 */
                radial-gradient(175px 175px at 175px 25%,black 20%,white 20%,white 50%,transparent 50%),
                /*第二个 圆的大小 175(50%)  at: 控制圆心的位置 x轴  y轴 */
                radial-gradient(175px 175px at 175px 75%,white 20%,black 20%,black 50%,transparent 50%),
                /* 线性渐变色 */
                linear-gradient(to right,white 50%,black 50%);
        }
    </style>
</head>
<body>
     <div class="box"></div>
</body>

Notice:

1. If you want to do a good job in Tai Chi, you must first clarify your thoughts. Each step above is very detailed and the explanation is in place;
2. Three gradients are used behind the background attribute, namely two radial gradients and one linear gradient. These three attribute values ​​must be written in a background attribute. The middle ones are in English, separated by commas, and end with In the English state; it ends with a semicolon, and it is easy to not be displayed if there is any irregularity;
3. Note that this linear gradient must be written after the radial gradient, otherwise the linear gradient will cover the radial gradient;
4. In the second step of the above steps, in order for everyone to see clearly, the middle white part of the first radial gradient is changed into a red part for easy observation. I hope you will not be deceived. It is equivalent to a borrowed one;
5. Regarding the position of the center of the two radial gradient circles, you can also open the console and slide the mouse to find the appropriate position.

Summarize

The above is a Tai Chi diagram case compiled by the editor. It uses the rounded border attributes, radial gradients and linear gradients to give a more detailed explanation of the Tai Chi diagram case. I compiled it based on my own understanding, and there may be inaccuracies and omissions. I hope you guys can give me some advice and make corrections. I would like to thank you in advance.