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θ**

#### 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

## 0 comments:

## Post a comment