Home > Developer > Web Develop

CSS + radius Five Rings

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Using the external chain of CSS, wrote a five-ring

Layout of CSS

Use of additional radius

Ideas:

Put two sub-boxes in a large box;

Two sub-boxes arranged up and down, respectively, 3 and 2 boxes were used to make the ring;

Large box to the relative positioning, even the sub-box set to absolute positioning;

Use the Border-radius method in CSS to make the ring, provided that the five boxes used to make the ring are to add a border border this property
HTML code

<! DOCTYPE html>
<meta charset= "Utf-8"/>

<!--CSS outside the chain--
<link rel= "stylesheet" href= "Css/base.css"/>
<title> Five Rings </title>
<body>
<!--to a big box outside the box--
<div class= "radius" >
<!--sub-box with three rings on top--
<div class= "Sub" >
<div class= "B-r a" ></div>
<div class= "B-r B" ></div>
<div class= "B-r C" ></div>
</div>
<!--sub-box two two rings below--
<div class= "sup" >
<div class= "B-r D" ></div>
<div class= "B-r e" ></div>
</div>
</div>
</body>
CSS Code /* Add styling and positioning to the outside box, mainly to give five rings a whole positioning */
. radius{
position:relative;
width:300px;
height:150px;
margin:0 Auto;
padding:0;
Background-color:lightskyblue;
}

/* Set CSS styles uniformly for five boxes to be set to ring */
. b-r{
Float:left;
width:80px;
height:80px;
Border-radius:50%;/*radius use, give a square set 50% can make a circle */
}
/* Add a border and color to the five ring boxes, the border is the ring */
. a{
border:10px solid blue;
}
. b{
border:10px solid black;
}
. c{
border:10px solid Green;
}
. d{
border:10px solid yellow;
}
. e{
border:10px solid red;
}

/* Then absolute positioning of the top three rings and the next two rings to form a five-ring marker map */
. sub{
width:300px;
height:100px;
Position:absolute;
Float:left;
/*background-color:aquamarine;*/
}
. sup{
width:200px;
height:100px;
Position:absolute;
margin:50px;
/*background-color:cornflowerblue;*/
}

That's the final effect.

Mo Mo said: "We use the layout of CSS, we can first conceive a whole picture and the corresponding box to temporarily add background color, so that it helps us to see the hierarchical relationship between the box to improve efficiency OH

CSS + radius Five Rings

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More