Thanks a million for the assistance, Tom. I doubt that I would ever have figured that out. It's not exactly intuitive that specifying a 'border radius' for a square object is the way to specify a circle. I must confess that I haven't yet figured out why a margin of 26px is called for. It obviously is, of course. Thanks again Bruce
Gesendet: Dienstag, 21. Januar 2014 um 18:22 Uhr Von: "Tom Livingston" <[email protected]> An: [email protected] Cc: "CSS Discussion Group" <[email protected]> Betreff: Re: [css-d] Simple display of concentric circles On Tue, Jan 21, 2014 at 12:13 PM, <[email protected]> wrote: > I've got some sort of mental block. I would like to display a series of > concentric circles with diameter 2 cm, 4 cm, 6 cm, 8 cm ... > > At the moment, I have > .circle1 { border: 4px solid #990000; > height: 60px; width: 60px; border-radius: 60px; } > > .circle2 { border: 4px solid #990000; > height: 120px; width: 120px; border-radius: 120px; } > > > <div class="circle1"> </div> > <div class="circle2"> </div> > > You're right - it IS quite primitive. I would like to be able to write > <div class="circle" diameter: 2, 4, 6, ...;</div> > > and have all the circles drawn with a common center. > > Can it be done with CSS? In keeping with "primitive": <style> .wrap{position: relative;width: 500px;} .circle1 { border: 4px solid #990000; height: 60px; width: 60px; border-radius: 60px; margin: 26px auto 0 auto; } .circle2 { border: 4px solid #990000; height: 120px; width: 120px; border-radius: 120px; margin: 0 auto 0 auto; } </style> <div class="wrap"> <div class="circle2"><div class="circle1"> </div></div> </div> I would guess SVG might be better, but I am not familiar with it. -- Tom Livingston | Senior Front-End Developer | Media Logic | ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/[http://css-discuss.incutio.com/] List policies -- http://css-discuss.org/policies.html[http://css-discuss.org/policies.html] Supported by evolt.org -- http://www.evolt.org/help_support_evolt/[http://www.evolt.org/help_support_evolt/] ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
