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 :

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

2 comments:

  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

    ReplyDelete
  2. When you go to work in an office and you need to write even more essays, then don't be upset, there is an essay writer who offers you high-quality essay writing services, or rather the 9 best essay writing services today

    ReplyDelete

Blogroll

Popular Posts