Html - How do I make all these arcs exactly positioned like that

NameetNameet
June 3, 2024
51 views
0 votes
2 Answers

I want to create these arcs through css such that upon hovering it changes its color to green from grey.
I want these arcs to be dynamic so that it fits in its parent container and adjusts itself.

It’s awfully painful to make these arcs in a single line, coz these are basically some part of the circle. So the center keeps shifting.
Any idea on how this can be achieved?

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

.size-selector {
  display: flex;
  justify-content: space-around;
  width: 100%;
  max-width: 800px;
}

.size {
  position: relative;
  text-align: center;
  font-size: 14px;
  color: gray;
  cursor: pointer;
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.size span {
  margin-bottom: 30px;
  font-size: 18px;
  transition: color 0.3s;
}

#size-s .arc {
  border: 2px solid #000;
  display: inline-block;
  height: 6em;
  padding: 0.5em;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  width: 6em;
}

#size-m .arc {
  border: 2px solid #000;
  width: 7em;
  height: 7em;
  padding: 0.5em;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  display: inline-block;
}

#size-l .arc {
  display: inline-block;
  width: 10em;
  height: 10em;
  padding: 0.5em;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border: 2px solid black;
}

#size-xl .arc {
  display: inline-block;
  width: 12em;
  height: 12em;
  padding: 0.5em;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border: 2px solid black;
}

#size-xx .arc {
  display: inline-block;
  width: 14em;
  height: 14em;
  padding: 0.5em;
  border-radius: 50%;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border: 2px solid black;
}

.size:hover .arc {
  border-color: limegreen;
}

#size-l:hover .arc {
  border-color: green;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.size:hover span {
  color: limegreen;
}

#size-l:hover span {
  color: green;
}

.arc-container {
  display: flex;
  align-items: flex-end;
}

<div class="size-selector arc-container">
  <div class="size" id="size-s"><span>S</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-m"><span>M</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-l"><span>L</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-xl"><span>XL</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-xx"><span>XX</span>
    <div class="arc"></div>
  </div>

Tags: css html

Answers

The trick is the make the centers of the circles to be in 1 line. Then you can arrange the arcs as per your requirement.

Fiddle link: https://jsfiddle.net/8p6go0hj/

body {
  font-family: Arial, sans-serif;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

.size-selector {
  display: flex;
  justify-content: space-around;
  width: 100%;
  position: relative;
      height: 144px;
    overflow: hidden;
}

.size {
  position: absolute;
  text-align: center;
  font-size: 14px;
  color: gray;
  cursor: pointer;
  flex-grow: 1;
  flex-basis: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  top:100px;
}

.size span {
  margin-bottom: 30px;
  font-size: 18px;
  transition: color 0.3s;
}

#size-s  {
  left: 0;
}

#size-s .arc {
  border: 2px solid #000;
  display: inline-block;
  height: 6em;
  padding: 0.5em;
  border-radius: 50%;
 /*  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent; */
  width: 6em;
  transform: translate(0, -50%);
  
}
#size-m {
  left: 120px;
}
#size-m .arc {
  border: 2px solid #000;
  width: 7em;
  height: 7em;
  padding: 0.5em;
  border-radius: 50%;
/*   border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent; */
  display: inline-block;
  transform: translate(0, -50%);
  
}
#size-l {
  left: 240px;
}
#size-l .arc {
  display: inline-block;
  width: 10em;
  height: 10em;
  padding: 0.5em;
  border-radius: 50%;
  border: 2px solid black;
 /*  border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent; */
  transform: translate(0, -50%);
}
#size-xl {
  left: 405px;
}
#size-xl .arc {
  display: inline-block;
  width: 12em;
  height: 12em;
  padding: 0.5em;
  border-radius: 50%;
    border: 2px solid black;
  /* border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent; */
  transform: translate(0, -50%);
}
#size-xx {
  left: 600px;
}
#size-xx .arc {
  display: inline-block;
  width: 14em;
  height: 14em;
  padding: 0.5em;
  border-radius: 50%;
    border: 2px solid black;
  /* border-bottom-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent; */
  transform: translate(0, -50%);
}

.size:hover .arc {
  border-color: limegreen;
}

#size-l:hover .arc {
  border-color: green;
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}

.size:hover span {
  color: limegreen;
}

#size-l:hover span {
  color: green;
}

.arc-container {
  display: flex;
  align-items: flex-end;
}

<div class="size-selector arc-container">
  <div class="size" id="size-s"><span>S</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-m"><span>M</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-l"><span>L</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-xl"><span>XL</span>
    <div class="arc"></div>
  </div>
  <div class="size" id="size-xx"><span>XX</span>
    <div class="arc"></div>
  </div>
</div>

I’d suggest a slightly different approach, where the arcs are put in place as borders of after pseudo elements rather than adding otherwise unneeded elements to the DOM.

This snippet also uses grid as it’s easier to control for a 2d layout.

Of course you will want to play with the variables to get the exact layout you want but as everything is specified in % terms it is responsive.

arcs rather than circles are achieved simply by using a clip-path.

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: #fff;
}

.size-selector {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5%;
  width: 100%;
  max-width: 800px;
  clip-path: polygon(0 0, 100% 0, 100% 60%, 0 60%);
  padding-bottom: 100px;
  box-sizing: border-box;
}

.size {
  position: relative;
  text-align: center;
  font-size: 32px;
  color: gray;
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding-bottom: 10%;
  box-sizing: border-box;
  transition: all 2s linear;
}

.size:hover {
  color: lime;
}

.size::after {
  content: '';
  --w: 70%;
  --extra: 1%;
  --offset: 10%;
  width: calc(var(--w) + (var(--n) * var(--extra)));
  aspect-ratio: 1;
  position: absolute;
  border: solid 2px gray;
  border-radius: 50%;
  transform: translateX(-50%);
  top: calc(100% + (6 - var(--n)) * var(--offset));
  left: 50%;
  transition: all 2s linear;
}

.size:hover::after {
  border-color: lime;
}

.size-selector :nth-child(1) {
  --n: 1;
}

.size-selector :nth-child(2) {
  --n: 2;
}

.size-selector :nth-child(3) {
  --n: 3;
}

.size-selector :nth-child(4) {
  --n: 4;
}

.size-selector :nth-child(5) {
  --n: 5;
}

<div class="size-selector arc-container">
  <div class="size" id="size-s">S
  </div>
  <div class="size" id="size-m">M
  </div>
  <div class="size" id="size-l">L
  </div>
  <div class="size" id="size-xl">XL
  </div>
  <div class="size" id="size-xx">XX
  </div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How do I make all these arcs exactly positioned like that

Answers