Also, may be able to do it with a radial gradient and some well-planned color stops, but you may be then excluding some browsers you need to support.
You can play here: http://www.colorzilla.com/gradient-editor/ HTH On Tue, Jan 21, 2014 at 12:22 PM, Tom Livingston <[email protected]> wrote: > 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 -- 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/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
