Nov 18, 2022

# Solution 1 :

You can use CSS rotation to put each circle in its correct position without having to do any geometrical calculatons yourself.

For example, in this snippet we have 10 items, each 15% the width of the parent container and 50% high. Each starts at the top, center of the parent but they are rotated depending on their position as a child.

The main trick is to rotate them about the same point, the center of the parent container.

The second thing we then need to do is rotate the contents of each circle back by an equivalent amount so the text (and images if you have them) in each circle appears vertical to the reader.

In this snippet the CSS variable –num is set to the number of circles. All the required angles of rotation can be then calculated within CSS.

This snippet gives this result – each item has been given a border to make it clearer what is happening.

``````.bigCircle {
--num: 10;
width: 90vmin;
aspect-ratio: 1 / 1;
position: relative;
margin: 0;
}

.bigCircle .item {
box-sizing: border-box;
width: 15%;
height: 50%;
border: 1px solid black;
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(calc(360deg / var(--num) * (var(--n) - 1)));
transform-origin: center bottom;
top: 0;
margin: 0;
0;
}

.bigCircle .item:nth-child(1) {
--n: 1;
}

.bigCircle .item:nth-child(2) {
--n: 2;
}

.bigCircle .item:nth-child(3) {
--n: 3;
}

.bigCircle .item:nth-child(4) {
--n: 4;
}

.bigCircle .item:nth-child(5) {
--n: 5;
}

.bigCircle .item:nth-child(6) {
--n: 6;
}

.bigCircle .item:nth-child(7) {
--n: 7;
}

.bigCircle .item:nth-child(8) {
--n: 8;
}

.bigCircle .item:nth-child(9) {
--n: 9;
}

.bigCircle .item:nth-child(10) {
--n: 10;
}

.circle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) rotate(calc(-360deg / var(--num) * (var(--n) - 1)));
width: 100%;
aspect-ratio: 1 / 1;
border: solid 5px red;
justify-content: center;
align-items: center;
flex-direction: column;
display: flex;
}``````
``````<div class="bigCircle">
<div class="item">
<div class="circle">1</div>
</div>
<div class="item">
<div class="circle">2</div>
</div>
<div class="item">
<div class="circle">3</div>
</div>
<div class="item">
<div class="circle">4</div>
</div>
<div class="item">
<div class="circle">5</div>
</div>
<div class="item">
<div class="circle">6</div>
</div>
<div class="item">
<div class="circle">7</div>
</div>
<div class="item">
<div class="circle">8</div>
</div>
<div class="item">
<div class="circle">9</div>
</div>
<div class="item">
<div class="circle">10</div>
</div>
</div>``````

Now we want to add the lines and small dot going from the edge of each circle towards the center of the container.

There are various ways to do this, including background images. This snippet uses pseudo elements to draw from the bottom of a circle towards the center of the container. Obviously you will want to change the dimensions of things to suit your use case.

``````.bigCircle {
--num: 10;
width: 90vmin;
aspect-ratio: 1 / 1;
position: relative;
margin: 0;
}

.bigCircle .item {
box-sizing: border-box;
width: 15%;
height: 50%;
position: absolute;
left: 50%;
transform: translateX(-50%) rotate(calc(360deg / var(--num) * (var(--n) - 1)));
transform-origin: center bottom;
top: 0;
margin: 0;
0;
}

.bigCircle .item:nth-child(1) {
--n: 1;
}

.bigCircle .item:nth-child(2) {
--n: 2;
}

.bigCircle .item:nth-child(3) {
--n: 3;
}

.bigCircle .item:nth-child(4) {
--n: 4;
}

.bigCircle .item:nth-child(5) {
--n: 5;
}

.bigCircle .item:nth-child(6) {
--n: 6;
}

.bigCircle .item:nth-child(7) {
--n: 7;
}

.bigCircle .item:nth-child(8) {
--n: 8;
}

.bigCircle .item:nth-child(9) {
--n: 9;
}

.bigCircle .item:nth-child(10) {
--n: 10;
}

.circle {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
aspect-ratio: 1 / 1;
border: solid 5px red;
display: flex;
justify-content: center;
align-items: center;
}

.circle::before {
content: '';
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 2px;
height: calc(100% - 15%);
background-color: red;
}

.circle::after {
content: '';
position: absolute;
top: calc(100% + 100% - 15%);
width: 10px;
aspect-ratio: 1 / 1;
background: red;
}

.circleContent {
position: absolute;
justify-content: center;
align-items: center;
flex-direction: column;
display: flex;
transform: translateX(-50%) rotate(calc(-360deg / var(--num) * (var(--n) - 1)));
}``````
``````<div class="bigCircle">
<div class="item">
<div class="circle">
<div class="circleContent">1</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">2</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">3</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">4</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">5</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">6</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">7</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">8</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">9</div>
</div>
</div>
<div class="item">
<div class="circle">
<div class="circleContent">10</div>
</div>
</div>
</div>``````

# Solution 2 :

You can make a circle several ways:

With inline CSS :

``<div style="border-radius: 50%; width: 100px; height: 100px;background:red;border:2px solid black;background-image: url(https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg);background-size: cover;"></div>``

With external CSS:

``````<style type="text/css">
#circle{
width: 100px;
height: 100px;
background: red;
border:2px solid black;
background-image: url(https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg);
background-size: cover;
}
</style>
<div id="circle"></div>``````

Using SVG :

``````<svg  height="100" width="100" viewBox="0 0 100 100">
<circle cx="51" cy="51" r="48" stroke="black" stroke-width="2" fill="red" />
</svg>``````

Or using canvas with javascript:

``````<canvas id="circleCanvas"></canvas>
<script type="text/javascript">
var c = document.getElementById("circleCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(51, 51, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>``````

I think you can pick your best. Thanks

# Solution 3 :

You’ll need to play around with the numbers a little bit, but you can definitely achieve this effect with:

• `position: absolute`
• `transform: translate()`

Working Example (needs tweaking):

``````.clock {
position: relative;
width: 100%;
height: 180px;
}

.circle {
position: absolute;
top: calc(50% - 20px);
left: calc(50% - 20px);
width: 40px;
height: 40px;
background-color: rgb(0, 0, 0);
}

.circle-1 {
transform: translate(45px, -50px);
}

.circle-2 {
transform: translate(75px, -15px);
}

.circle-4 {
transform: translate(75px, 30px);
}

.circle-5 {
transform: translate(45px, 60px);
}

.circle-6 {
transform: translate(0, 75px);
}

.circle-7 {
transform: translate(-45px, 60px);
}

.circle-8 {
transform: translate(-75px, 30px);
}

.circle-10 {
transform: translate(-75px, -15px);
}

.circle-11 {
transform: translate(-45px, -50px);
}

.circle-12 {
transform: translate(0, -70px);
}``````
``````<div class="clock">
<div class="circle circle-center"></div>
<div class="circle circle-1"></div>
<div class="circle circle-2"></div>
<div class="circle circle-4"></div>
<div class="circle circle-5"></div>
<div class="circle circle-6"></div>
<div class="circle circle-7"></div>
<div class="circle circle-8"></div>
<div class="circle circle-10"></div>
<div class="circle circle-11 "></div>
<div class="circle circle-12"></div>
</div>``````

# Solution 4 :

here i can share you a link to codepen.io

I think you can get results with a few changes and adding svg to code.

``````<--! https://codepen.io/syakirurahman/pen/ZoKPwo -->
``````

# Problem :

Can anyone make this circle with html code ?

I tried this with anychart library but it is not good !

### Comment posted by w3schools.com/html/html_images_imagemap.asp

I would just save that whole image with circles as a png with transparent background, and then use image map add a link to every circle:

### Comment posted by A Haworth

Investigating transform-origin and transform rotate and pseudo elements should help do it in pure html and css, no need for whole libraries.

### Comment posted by Egor

I think he means you should make not one circle but picture with circles and lines

### Comment posted by سبحان مقیسه

thank you , how can make it dynamic ? for example if we have 4 item , 4 circle with 90 degree will display ?

### Comment posted by Rounin – Standing with Ukraine

If you want to use different inputs to generate different outputs I imagine you’re going to need javascript.

### Comment posted by Alireza

add this code under the sitemap span for example

### Comment posted by minimal, workable example (mwe)

Please share any relevant code in the Question, as a