CSS + radius Five Rings

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