Как сверстать такой семи-круг?

133
24 декабря 2020, 03:40

Подскажите пожалуйста каким образом можно сделать такой семи круг с пунктами?

Answer 1

Вот Вам svg+css и верстка по формуле, для автоматического определения положения маленьких кругов на большом.

// cx, cy - центр большого круга
// r - радиус большого круга 
// alpha - угол в полярной системе координат
let x = cx + cos(alpha - PI/2) * r;
let y = cy + sin(alpha - PI/2) * r;

Можно отладчиком отсюда вытащить готовую svg и на странице не использовать никакие скрипты.

let r1 = 500, // радиус большого круга 
    r2 = 12, // радиус маленьких кругов 
    step = 0.08, // шаг между кругами в радианах 
    cx = 150, // координаты центра  
    cy = r1 + 40; // большого круга 
 
let icons = ['        
    
Answer 2

Такой себе вариант, но как вариант))

.menu { 
  display: block; 
  width: 100%; 
  padding-top: 35px; 
  font-size: 0; 
  text-align: center; 
  overflow: hidden; 
  position: relative; 
} 
 
.menu::after { 
  content: ''; 
  width: 100%; 
  height: 200%; 
  border-radius: 100%; 
  border: 1px solid red; 
  position: absolute; 
  left: 0; right: 0; 
  bottom: -125%; 
} 
 
.item { 
  display: inline-block; 
  width: 30px; 
  height: 30px; 
  background: green; 
  border-radius: 100%; 
  position: relative; 
  z-index: 1; 
  cursor: pointer; 
} 
 
.item:hover { 
  background: blue; 
} 
 
.item:not(:last-child) { 
  margin-right: calc(100% / 7 - 30px); 
} 
 
.item:nth-child(2), 
.item:nth-child(6) { 
  top: -20px; 
} 
 
.item:nth-child(3), 
.item:nth-child(5) { 
  top: -30px; 
} 
 
.item:nth-child(4) { 
  top: -35px; 
}
<div class="menu"> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
  <div class="item"></div> 
</div>

READ ALSO
Разработка лайков на Django

Разработка лайков на Django

Итак, всем привет, возникли сложности в разработке системы лайков, видимо что-то недопонимаюВот моя модель постов

122
JQuery div onChange внутри &lt;a href

JQuery div onChange внутри <a href

Я пытаюсь добавить событие click на div, который находится внутри a, Я не хочу, чтобы событие a href срабатывало при запуске события щелчка

132
WPF не работает Binding на FontSize внутри DataTemplate

WPF не работает Binding на FontSize внутри DataTemplate

Здравствуйте! Программа написанна на WPF MVVM с использованием фреймворка caliburn MicroВозникла необходимость динамически менять размер шрифта...

117
Отложенный запуск программ C#

Отложенный запуск программ C#

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

109