SodhanaLibrary

In this article I am going to explain how to arrange given set of elements on Ellipse With CSS3 and SASS. 

Lets see Math formula for Ellipse.

X = X -coordinate

Y = Y -coordinate

Ra, Rb = One-half of the Ellipse's major and minor axes 

X = Ra cosθ

Y = Rb sinθ

In this example total 12 elements will be there. We are going to align those 12 elements in Ellipse by using SASS trigonometric function.

HTML markup of 12 div elements :

<div></div>
<div></div>
<div></div>
......9 more divs

SASS code :

This below code will apply Left and Top positions based on nth-child property.

$class: div !default

$radius-a: 400

$radius-b: 200

$angle: 30deg

@for $i from 1 through 12
  #{$class}:nth-child( #{$i} )
    left: #{$radius-a + 100 + ($radius-a*cos( ($i - 1) * $angle)) }px
    top: #{$radius-b + 100 + ($radius-b*sin( ($i - 1) * $angle)) }px

      
div
  width : 10px
  height : 10px
  border : 1px solid #ccc
  position : absolute 
  background-color : #ff0000
  

Demo :