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

Question

Max

css

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

Как округлить внутреннюю область вокруг центральной кнопки с использованием CSS? Внешнюю область я уже округлил, но возникают затруднения с центральной частью. Я выделил красным цветом в демо-коде область, которую хочу стилизовать. Вот ссылка на мой код: <a href="https://codepen.io/bdlfraod-the-bashful/pen/NWZaPRy" rel="nofollow">https://codepen.io/bdlfraod-the-bashful/pen/NWZaPRy</a>

9 августа 2024 г. 21:03

Ответы на вопрос 2

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

Answer 1

Для того чтобы сделать одну из граней элемента вогнутой, можно использовать свойство `border-radius` и задать ему значение, чтобы одна из граней была вогнутой. Например, используя CSS можно сделать вогнутой верхнюю грань элемента следующим образом:

```css
.element {
  border-radius: 50% 50% 0 0;
}
```

Чтобы округлить внутреннюю область вокруг центральной кнопки на вашем примере, вы можете задать `border-radius` для внутренней области и сделать ее круглой. Для этого в вашем CSS можно добавить стили для внутренней области:

```css
.inner-circle {
  border-radius: 50%;
}
```

Ссылка на отредактированный код с округленной внутренней областью вокруг центральной кнопки: <a href="https://codepen.io/bdlfraod-the-bashful/pen/ExvZgEB" rel="nofollow">https://codepen.io/bdlfraod-the-bashful/pen/ExvZgEB</a>

Answer 2

Я бы пошел другим путем и не стал бы скруглять кучу дивов. А вместо этого спрятал бы нескругленные части. 
 
 .toggle-hidden {
  content: '';
  display: block;
  width: 65px;
  height: 65px;
  z-index: 10000;
  overflow: hidden;
  position: absolute;
  background: linear-gradient(45deg, #8460ed, #ff1252);
  border-radius: 50%;
}
 
 
 ...
<div class="menu">
    <div class="toggle-hidden">
    </div>
    <div class="toggle">
...
 
 
 И дальше остается только цвет подобрать чтоб в фон попадало идеально 
 
 Касательно иконок 
 ion-icon {
  color: white;
  transform: rotate(calc(-360deg / 8 * var(--i)));
  display: inline-block;
}