? In this article, we will introduce "How to arrange elements on a circle using only CSS" along with actual source code.
It has a simple design that can be reused , so please give it a try!
table of contents
Goal Layout
STEP 1 - Place a circle
STEP 2 - Add child elements
STEP 3 - Center the child element in the circle
STEP 4 - Set the position of the child elements on the circumference
STEP 5 - Calculate the coordinates and place it on the circumference
This completes it!
Layout Variations
Rotate child elements along a circle
Change the parent element to an ellipse
Center child element in border
Now it's up to you to customize it!
Conclusion
Goal Layout
Here is the final layout we will be creating.
Goal Image
From here on, we will create it from italy b2b leads scratch aiming for this shape.
If you want to skip the steps and just check the source code, please go to " Completed! "
STEP 1 - Place a circle
First, place a circle that will be the parent element. At this time, it will be useful to set
the radius of the circle using a custom property .
[Reference] Using CSS custom properties (variables) | MDN
Image at this point (no change from STEP 3)
Image of STEP 4
STEP 5 - Calculate the coordinates and place it on the circumference
The coordinates of the points on the circumference are calculated using the angle set in STEP 4, and
the child elements are positioned using the translate property.
This is where CSS trigonometric functions come into play.
We won't go into detail here, but we can use the sin function to find the Y coordinate of a point on the circumference, and the cos function to find the X coordinate.
TrigFunctionDiagram
PAR, CC0, via Wikimedia Commons
By the way, when using trigonometric functions in JavaScript, you need to convert the angle to radians, but with CSS trigonometric functions you can pass angles such as "deg" and "turn" as they are. Convenient!
Please note that there are the following differences between the world of CSS and the world of mathematics, so
please keep this in mind when interpreting the code!
■ CSS
Y axis positive direction: Down
Rotation direction: Clockwise
■ Mathematics
Y axis positive direction: Up
Rotation direction: Counterclockwise
This completes it!
Finished image
Now our goal is complete!
The final source code is as follows:
}
Now it's up to you to customize it!
With the above steps, we hope you have a good foundation for most layouts.
Now, feel free to customize it to create your own layout!
Customization example 1
Customization example 2
Customization example 3
Conclusion
This concludes my introduction to " How to arrange elements in a circle using only CSS."
I've put together a simple code, so I hope it will be of some help to you!
This time, we've stuck to the basics, but I think you can create much more interesting expressions depending on how you use it
. You can combine multiple circles, combine them with animation, add interactive elements, etc. There are countless applications, so please try out various things!
