This is the 20th day of my participation in the August More Text Challenge

Question origin

A few days ago, I did not know what to write, and asked the workers on the boiling point (knocking on the blackboard, official diameter) what else was interesting to draw at the front:

CSS do not know what to write, brothers give debut title

Some fellow workers said to draw taiji chart, boon ~ taiji chart long like this:

It’s a little complicated. Let’s try it out.

Round draw

According to our previous CSS article, we currently have two strategies for drawing circles:

  1. Apply to a squareborder-radius: 50%
  2. Using graphicscli-path: cirlcle(..)Interception of circular

The first type of border-radius is obviously simpler.

Graphic disassembly and rendering

Taiji diagram can be divided into two semicircle of black and white on the left and right sides, and a big circle on the upper and lower parts respectively.

So let’s do it the way we think about it.

Two semicircle

  1. Let’s start by drawing two rectangles next to each other:

<! DOCTYPEhtml>
<title>Present,</title>

<body>
    <div class="taiji-left"></div>
    <div class="taiji-right"></div>
</body>
<style>
    body  {
        width: 100vw;
        height: 100vh;
        background: lightblue;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .taiji-left {
        height: 300px;
        width: 150px;
        background: black;
    }
    .taiji-right {
        height: 300px;
        width: 150px;
        background: white;
    }
</style>
</html>
Copy the code
  1. Add respectivelyborder-radius:
.taiji-left {
        height: 300px;
        width: 150px;
        background: black;
        / * * /
        border-radius: 150px 0 0 150px ;
    }
    .taiji-right {
        height: 300px;
        width: 150px;
        background: white;
        / * * /
        border-radius: 0 150px 150px 0;
    }
Copy the code

  1. Add rings to the upper and lower halves respectively:

In the HTML section, add two divs, taiji-top and taiji-bottom, and their CSS gives the ring effect by setting large border and border-radius.

Code:

<! DOCTYPEhtml>
<title>Present,</title>

<body>
    <div class="taiji-left">
        <div class="taiji-top"></div>
    </div>
    <div class="taiji-right">
        <div class="taiji-bottom"></div>
    </div>
</body>
<style>
    body  {
        width: 100vw;
        height: 100vh;
        background: lightblue;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    .taiji-left {
        height: 400px;
        width: 200px;
        background: black;
        border-radius: 200px 0 0 200px ;
        position: relative;
    }
    .taiji-right {
        height: 400px;
        width: 200px;
        background: white;
        border-radius: 0 200px 200px 0;
        position: relative;
    }

    .taiji-top {
        border: 75px solid red;
        width: 50px;
        height: 50px;
        background: white;

        position: absolute;
        top: 0;
        right: -100px;
        border-radius: 50%;
        z-index: 2;
    }

    .taiji-bottom {
        border: 75px solid red;
        width: 50px;
        height: 50px;
        background: black;

        position: absolute;
        bottom: 0;
        left: -100px;
        border-radius: 50%;
    }
</style>
</html>
Copy the code

  1. Modify to correspondborderColor:

conclusion

Easier to look at than to do.

Go to the Internet to search, some big god with a DIV implementation, look at the idea, reduce the DOM of the general idea is:

  1. Using pseudo-elements::beforewith::afterInstead of an HTML DIV.
  2. usebox-shadowTo simulate the DOM
  3. Use different border definitions to generate a circle with one side black and one side white.