D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
sethkontny
Full window
Github gist
A Pen by Malik Baba Aïssa.
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'> <div class="container"> <h1>Placing elements on a circle using CSS3</h1> <p>Below is a pretty nifty method I use to place elements on circle. </p> <!-- BEGIN CIRCLE CODE --> <div class="wrapper"> <div class="radius"> <a href='#' class='center'>O</a> <a href='#' class='point deg0'><span>1</span></a> <a href='#' class='point deg15'><span>2</span></a> <a href='#' class='point deg30'><span>3</span></a> <a href='#' class='point deg45'><span>4</span></a> <a href='#' class='point deg60'><span>5</span></a> <a href='#' class='point deg75'><span>6</span></a> <a href='#' class='point deg90'><span>7</span></a> <a href='#' class='point deg105'><span>8</span></a> <a href='#' class='point deg120'><span>9</span></a> <a href='#' class='point deg135'><span>1O</span></a> <a href='#' class='point deg150'><span>11</span></a> <a href='#' class='point deg165'><span>12</span></a> <a href='#' class='point deg180'><span>13</span></a> <a href='#' class='point deg195'><span>14</span></a> <a href='#' class='point deg210'><span>15</span></a> <a href='#' class='point deg225'><span>16</span></a> <a href='#' class='point deg240'><span>17</span></a> <a href='#' class='point deg255'><span>18</span></a> <a href='#' class='point deg270'><span>19</span></a> <a href='#' class='point deg285'><span>2O</span></a> <a href='#' class='point deg300'><span>21</span></a> <a href='#' class='point deg315'><span>22</span></a> <a href='#' class='point deg330'><span>23</span></a> <a href='#' class='point deg345'><span>24</span></a> </div> </div> <!-- END CIRCLE CODE --> <h6>This method was originally described by: <a href="https://dabblet.com/gist/3864650" target="_blank">https://dabblet.com/gist/3864650</a></h6> </div>