Как закруглить одну из граней элемента внутрь (сделать впалой)?

Question

[DeusEx01]

Господа. Совсем потерялся в CSS. Как сделать закрулгление внутри вокруг центральной кнопки? Снаружи сделал, закруглив сам контейнер, а вот внутри (в центре) не могу додуматься, как похожий трюк реализовать. Подсветил область красным цветом в демо коде по ссылке, как я это хотел бы(пытался) реализовать...
https://codepen.io/bdlfraod-the-bashful/pen/NWZaPRy

С чего беру пример:

Мой результат:


P.s. также буду рад подсказке, как держать все иконки без ротации внутри каждой кнопки, т.к. собирался туда текст добавлять.

Comments

[Александр]

Напомнило https://youtu.be/65O-kmgmRI4, начало с 01:00:28

[DeusEx01]

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

Answer 1

[Владимир Римидалв]

Я бы пошел другим путем и не стал бы скруглять кучу дивов. А вместо этого спрятал бы нескругленные части.

Добавляем новый див

...
<div class="menu">
    <div class="toggle-hidden">
    </div>
    <div class="toggle">
...

Прописываем ему класс

.toggle-hidden {
  content: '';
  display: block;
  width: 65px;
  height: 65px;
  z-index: 10000;
  overflow: hidden;
  position: absolute;
  background: linear-gradient(45deg, #8460ed, #ff1252); // даем цвет чтобы спрятать ненужное
  background-size: 200% 200%; // тут можно поиграться с циферками
  background-position: calc(50% - 65px/2) calc(50% - 65px/2);  // чтобы цвета больше совпадали с боди
  border-radius: 50%;
}

И дальше остается только цвет подобрать чтоб в фон попадало идеально

Касательно иконок

ion-icon {
  color: white;
  transform: rotate(calc(-360deg / 8 * var(--i)));
  display: inline-block;
}

Comments

[DeusEx01]

Спасибо. Действительно то, что нужно. За иконки еще раз спасибо.
Надеюсь, мне хватит этого подхода для будущих манипуляций с этой менюшкой

Answer 2

[Сергей delphinpro]

Проще всего отрисовать svg

Comments

[DeusEx01]

Спасибо, буду держать в голове. Возможно, к этому и придет все.

Answer 3

[Данил Остапенко]

Похожее решение реализовывал вот так https://cytoscape.org/cytoscape.js-cxtmenu/ но у меня гораздо меньше пунктов было, это не совсем ответ на Ваш вопрос, но больше информации не меньше :)

P.S. Я бы еще рассмотрел css polygon,, рисуй что хочешь :3 ( из плюсов, это то, что зона ховера будет прям по контуру объекта, но я бы начинал рыть со стороны svg ( сугубо имхо )

Comments

[DeusEx01]

Спасибо за информацию. Я в первый раз как раз полигоном и сделал, но я решительно не понял, какую формулу подобрать, чтобы жанглировать количеством элементов меню. Вот тот вариант: https://codepen.io/bdlfraod-the-bashful/pen/XWLeYOM

Сейчас я отрисовал с помощью svg как раз таки, под удобные и универсальные формулы где я могу свобоно менять количество элементов. Но теперь я решительно не понимаю, как в эти сегменты впихнуть иконку с текстом =))
https://codepen.io/bdlfraod-the-bashful/pen/Rwzjejx

С SVG ранее не работал, поэтому пока что туплю на такую банальную вещь...