How to use CSS3 to draw a concentric circle

This article mainly introduces the use of CSS3 how to draw a concentric circle of relevant data, the text gives a detailed example code, and the code is detailed analysis of the method of understanding and learning, for everyone has a certain reference learning value, the need for friends below to see it together.

Basic ideas

First of all, you have to draw three round bar, how do the three circles overlap to a piece? This has to be controlled by-margin.

<p id= "Tongxin" >    <p id= ' t1 ' ></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;        }

Results

Code Analysis

How do you understand the above code? Like the margin-left:-125px in T2. margin-top:25px; Look at the picture below.

-125 means move 125px,25 to the left to move 25px down. Why is the left mobile 125px, this depends on your junior high school math how. The distance between the two centers. Large circle radius of 75px, Medium circle radius 50px. This means that the distance between the circle and the circle is 125px.

Moving vertically 25px is because the center distance of the vertical direction is 25px.

Summarize

Understanding the direction of movement of margin values this thing is done!

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!