Home>
I want to place buttons in a circle using html, css, and javascript, with the same distance between each button.
There are large and small buttons.
Although it is an image, I want to make the blue arrows in the figure equally spaced.
I have created it referring to the following article, but I do not know how to make the arrangement I want to make.
Link content
If i create with the contents of the article, the red arrows in the following figure will be equal.
Please refer to this article and tell me how to make the blue arrows in the figure equally spaced.
I am sorry that the question is abstract and difficult to communicate, thank you. -List
Description] (4fc1beb78c94d0709e645c65436a76a2. png)
-
Answer # 1
Related articles
- javascript - buttons that scale the entire page do not work
- javascript - i want to identify which of the multiple buttons was pressed and save the data in firebase
- javascript rails pushes irrelevant buttons
- javascript - how to get multiple radio buttons with js
- [javascript] i want to sound an ok alert when three buttons are clicked
- javascript - i want to get the values of radio buttons and checkboxes at the same time
- javascript - how to arrange lists and shapes side by side in html
- javascript - i want to measure the buttons in the iframe with google analytics installed on the parent page
- javascript - i want to arrange photos of different sizes with the same margins and lazy loading
- javascript - how to arrange the array hierarchy
- about inactivity of buttons by javascript
- javascript - i want to make a program that selects three radio buttons and clicks the "view explanation" button to giv
- javascript - [vue] radio buttons with the same radiobutton value are linked
- javascript - when there are multiple submit buttons in one form, i want to divide the processing depending on which button is pr
Related questions
- java - i want to dynamically change the width of the header when the screen is enlarged
- javascript - i'm in trouble because i can't make a slider
- javascript - consolelog is not displayed
- javascript - [jquery] i want to change the pop-up display when leaving the page
- javascript - how do i run a css animation that scales after each css animation?
- javascript - when you can do the same in different languages
- how to search the part where the class name "parent child" is applied on the html dynamically generated by javascript
- javascript - after installing bootstrap, the tag got an unintended js decoration
- javascript - i want to display a drop-down menu using css and js in html
- i want to perform conditional work for each block with javascript
Consider the following diagram.
Suppose that there are several circles around, such asA is the first center, B is the center circle, and D is the center circle. When considering the circle with the center B, the angle α consisting of B-A-C can be obtained because AB and AC are the radii of the center and BC is the radius of the B circle. Then, the angle that B circle occupies in A circle is 2α. Find the angles in the same way for all the outer circles and get the total. Let β be the sum of 2π minus the total and divided by the number of circles. If you make the width from β to CE like that, the neighbors can all be β at the intersection of the central garden and the outer circle, so it looks like a regular interval.
This method is approximate. If the radius of each circle is not sufficiently small compared to the radius of A, the error will be noticeable. The distance between individual circles (CE length in the image) is different from the distance between circles (length in the image minus the radius of each BD). If the radius of A is sufficiently large, I think that it is an inconspicuous error. However, if there are circles with a radius close to the radius of A, be careful as they may overlap.
In, I didn't know how to make the real circle distance, the distance of BD minus the radius, equal. Although it seems that it can be obtained from the point where the number of BAD angles added is 2π, I did not know if there was a simple way to find it programmatically. (Please tell me if you are strong in mathematics)