How to use CSS3 to draw a concentric circle

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.