Как мне сделать так, чтобы все эти дуги располагались именно так?

Я хочу создать эти дуги с помощью CSS так, чтобы при наведении курсора они меняли свой цвет с серого на зеленый. Я хочу, чтобы эти дуги были динамическими, чтобы они помещались в родительский контейнер и настраивались самостоятельно.

Ужасно больно выстраивать эти дуги в одну линию, ведь это по сути часть круга. Поэтому центр продолжает смещаться. Есть идеи, как этого можно достичь?

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>

что ты пробовал? где ты застрял?

— jeremy-denis 03.06.2024 11:38

Либо используйте путь SVG, либо простой элемент html с границей + радиусом границы. Нам нужна более подробная информация о том, что вы пробовали и в чем именно проблема? Если вам просто сложно разместить их в родительском контейнере, покажите нам, как вы это делаете, чтобы мы могли помочь.

— Salketer 03.06.2024 11:42

добавлены подробности, если вы, ребята, можете, пожалуйста, посмотрите еще раз

— Nameet Nameet 03.06.2024 12:00

«Я хочу, чтобы эти дуги были динамичными, чтобы они помещались в родительский контейнер и настраивались сами». - на вашем изображении все они выглядят одинакового размера (это означает, что каждый столбец имеет одинаковую ширину, независимо от текстового содержимого), тогда как в вашем фрагменте они все разных размеров. Так какой же он должен быть?

— CBroe 03.06.2024 12:00

первое изображение, разница очень тонкая. Если вы сравните маленький размер и размер XXL, вы довольно быстро заметите разницу. высота и начальная и конечная точки дуг различаются.

— Nameet Nameet 03.06.2024 12:07

Дуги предназначены только для визуального эффекта? Если это так, вы можете рассмотреть возможность использования псевдоэлементов, а не помещать в HTML ложные дополнительные элементы.

— A Haworth 03.06.2024 12:35
html css
03.06.2024 11:37
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
6
86
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Хитрость заключается в том, чтобы центры кругов располагались на одной линии. Затем вы можете расположить дуги по своему усмотрению.

Ссылка на скрипку: https://jsfiddle.net/vmnqky59/

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: 120px;
  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:150px;
}

.size span {
  font-size: 18px;
  transition: color 0.3s;
  position: absolute;
  top: -130px;
}

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

ценю ответ, но полукруги — это не то, что я ищу. задача состоит в том, чтобы создавать дуги разного размера и с разной начальной и конечной точкой.

— Nameet Nameet 03.06.2024 13:41

в классе css .size-selector у нас есть свойство height: 144px;. Вы можете уменьшить высоту, чтобы получить дугу по вашему выбору. Кроме того, наличие border-width: 1px 0 0 0; приведет к образованию дуги, а не полукруга. В основном я сосредоточился на концепции.

— Sudipto Roy 03.06.2024 14:38

но тогда это портит положение букв (S, m,..), они не в одной строке

— Nameet Nameet 04.06.2024 07:39

Я отредактировал ответ в соответствии с вашими требованиями. Я обновил размер .size-selector { height: 120px; }. Сделал все метки (S, M и т. д.) как positon: absolute и выровнял их в одну строку.

— Sudipto Roy 04.06.2024 16:59

Я изменил ширину всех дуг на 100 %, что сделало страницу отзывчивой. Но я не могу установить динамическую высоту. Если я ставлю любой процент, дуга исчезает. есть идеи по этому поводу?

— Nameet Nameet 08.06.2024 07:43
03.06.2024 13:13

Я бы предложил немного другой подход, при котором дуги размещаются как границы после псевдоэлементов, а не добавляются в DOM ненужные элементы.

В этом фрагменте также используется сетка, поскольку ею легче управлять 2D-макетом.

Конечно, вам захочется поиграть с переменными, чтобы получить именно тот макет, который вам нужен, но поскольку все указано в процентах, он отзывчив.

дуги, а не круги, создаются просто за счет использования контура обрезки.

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>
03.06.2024 16:05

Другие вопросы по теме

Перемещение границы заголовка HTML-таблицы (перекрывается цветом фона)
У меня есть оболочка Flexbox, которая имеет небольшой скачок при масштабировании браузера
Невозможно переместить элементы вправо на HTML-странице
Использование псевдоэлемента '::marker' для создания заголовков в стиле Markdown
Функция minmax() в CSS работает неправильно
Изменить цвет встроенного SVG внутри тега <img>
Как я могу предотвратить перекрытие столбцов сетки и использовать горизонтальную прокрутку для мобильных устройств?
Как я могу полностью перенести строку слов на следующую строку в HTML/CSS?
Условный селектор родственного брата в CSS?
Кроссбраузерные альтернативы для параметров модуля IMPORT ASSERT

Похожие вопросы

Перемещение границы заголовка HTML-таблицы (перекрывается цветом фона)
У меня есть оболочка Flexbox, которая имеет небольшой скачок при масштабировании браузера
Как получить текстовое содержимое tspan?
Невозможно переместить элементы вправо на HTML-странице
Сложение значений из входного массива в таблице, а затем накопление объема данных
Как устранить ошибку «Не удалось разрешить импорт «src/lib/utils» из… Существует ли этот файл?»
Использование псевдоэлемента '::marker' для создания заголовков в стиле Markdown
Изменить цвет встроенного SVG внутри тега <img>
Автоматический размер шрифта — js
Как я могу полностью перенести строку слов на следующую строку в HTML/CSS?