How to draw concentric circles using css3

This article mainly introduces you to the relevant information on how to draw concentric circles using css3. The article provides detailed sample code and a detailed analysis method for the code for everyone to understand and learn. It has certain knowledge for everyone. Refer to the learning value. Friends who need it can take a look below.

Basic idea

First you have to draw three circles, then how do the three circles overlap? This must be controlled by -margin.

<p id="tongxin">
    <p id=&#39;t1&#39;></p>
    <p id="t2"></p>
    <p id="t3"></p>
</p>

css

        #t1 {
            float:left;
            width:150px;
            height:150px;
            background: pink;
            border-radius:75px ;
        }
        #t2 {    
            float:left;
            width:100px;
            height:100px;
            margin-left:-125px;/*move to left 125px*/
            margin-top:25px;/* move to bottom 25px*/
            background: green;
            border-radius: 50px;
        }
        #t3 {
            float:left;
            width:50px;
            height:50px;
            margin-left:-100px;/*move left 100px*/
            margin-top:50px;
            background: yellow;
            border-radius: 25px;
        }

##result

Code Analysis

How to understand the above code? For example, margin-left:-125px in t2. margin-top:25px; Look at the picture below

-125 means moving 125px to the left, and 25 means moving 25px down. Why is it moved 125px to the left? This depends on how well you studied mathematics in junior high school. The distance between the centers of two circles. The radius of the large circle is 75px, and the radius of the middle circle is 50px. In other words, the distance between the centers of the big circle and the small circle is 125px.

The vertical movement of 25px is because the vertical center distance of the circle is 25px.

Summary

Understanding the moving direction represented by the margin value is done!

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the method of responsive centered display of CSS banner image

How to use negative margin values ​​in CSS To adjust the center position

The above is the detailed content of How to draw concentric circles using css3. For more information, please follow other related articles on the PHP Chinese website!