Draw a concentric circle using css3-CSS Tutorial-php.cn

Draw a concentric circle using css3

php中世界最好的语言

Release： 2018-03-21 17:06:20

Original

2288 people have browsed it

This time I will bring you how to use css3 to draw concentric circles and what are the precautions. Here is a practical case. Let’s take a look.

Basic idea

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

margin.

Copy after login

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

Copy after login

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.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!