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/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
