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

\$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 :

See the Pen amtJd by srinivas (@srinivasD) on CodePen.

#### 1 comment:

1. I love your creativity. Are you also searching for engineering assignment help UK? we are the best solution for you. We are best known for delivering quality essay writing services to students without having to break the bank