[ANSWERED] css – how can make this circle with html?

Question 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;
  padding: 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;
  padding;
  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-radius: 50%;
  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;
  padding: 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;
  padding;
  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-radius: 50%;
  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;
  border-radius: 50%;
}

.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>

Question 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;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        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

Question 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);
  border-radius: 50%;
}

.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>

Question 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 -->

Question 5

Can anyone make this circle with html code ?

enter image description here

I tried this with anychart library but it is not good !
enter image description here

Bollate

[ANSWERED] css – how can make this circle with html?

By

Solution 1 :

Solution 2 :

Solution 3 :

Solution 4 :

Problem :

Comments

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

Comment posted by A Haworth

Comment posted by Egor

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

Comment posted by Rounin – Standing with Ukraine

Comment posted by Alireza

Comment posted by minimal, workable example (mwe)

By

Related Post

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

[ANSWERED] javascript – How to handle repeating values in JQuery

[ANSWERED] java – How to send dropdown value to servlet NOT the option text

You missed

[ANSWERED] javascript – Text box to display updated text and save on button click

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Bollate