Using calc :

Using SASS :

Lets use SASS for high level Math operations. SASS provides some interesting Math functions for styling elements.

pi()

sin($number)

cos($number)

tan($number)

logarithm($number, $base)

sqrt($number)

pow($number, $exponent)





Now I will arrange HTML elements on Circle with Trigonometry



Formula for Circle in Trigonometry :

X = X - Coordinate

Y = Y - Coordinate

R = Radius of Circle

X = R cosθ

Y = R sinθ

HTML markup of 12 div elements :

We can style elements using simple Math with CSS3 propertyproperty. We can define one element width by using arithmetic operations like Addition, Multiplication, Division.Lets define HTML elements left property with CSS3left : calc(50% + 100px);left : calc(50% - 100px);left : calc(25% * 2);left : calc(25% / 2);