Я строю веб-сайт, и мне трудно делать детали в CSS

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

Что мне нужно (фотошоп)

введите описание изображения здесь

введите описание изображения здесь

Я хотел бы решение CSS, но я не мог.

Вот что у меня есть на самом деле:

.bottom-bar { background: #29a7e8; position: absolute; bottom: 0; width: 100%; height: 50px; text-align: center; } .circle { display: inline-block; position: relative; top: -10px; border-radius: 100%; background: #29a7e8; width: 60px; height: 60px; margin: 0 1rem; } 
 {amp}lt;div class="bottom-bar"{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

Вы можете сделать это, используя SVG в качестве фона:

 .bottom-bar { background: #29a7e8; position: absolute; bottom: 0; width: 100%; height: 50px; text-align: center; } .circle { display: inline-block; position: relative; top: -28px; border-radius: 100%; background: url("data:image/svg xml;utf8,{amp}lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15' width='64' height='64' fill='#29a7e8'{amp}gt;{amp}lt;path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /{amp}gt;{amp}lt;/svg{amp}gt;") 0 0/100% 100% no-repeat; width: 60px; height: 60px; margin: 0 1rem; } 
 {amp}lt;div class="bottom-bar"{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;svg xmlns='http://www.w3.org/2000/svg' viewBox='10 10 45 15' width='64' height='64' fill='#29a7e8'{amp}gt; {amp}lt;path d='M12 24 L52 24 L52 16 C40 16 42 10 32 10 C20 10 22 16 12 16 Z' /{amp}gt; {amp}lt;/svg{amp}gt; 

Для решения только для CSS вы можете рассмотреть комбинацию радиального градиента для создания кривой:

 .bottom-bar { background: #29a7e8; position: absolute; bottom: 0; width: 100%; height: 50px; text-align: center; } .circle { display: inline-block; position: relative; top: -30px; background: radial-gradient(circle at top right,transparent 50%,#29a7e8 51%)100% 21px/12px 10px no-repeat, radial-gradient(circle at top left,transparent 50%,#29a7e8 51%)0 21px/12px 10px no-repeat, radial-gradient(circle at center,#29a7e8 55%, transparent 56%); width: 60px; height: 60px; margin: 0 1rem; } 
 {amp}lt;div class="bottom-bar"{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;div class="circle"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;/div{amp}gt; 

В общем, существуют способы создания таких форм, от простых до более сложных:

  • Добавление 2 псевдоэлементов с radial-gradient .

    Самое простое и хорошо поддерживаемое решение. Вероятно, тот, который я бы использовал.

  • Добавление 2-х псевдоэлементов с mask-image (то же, что и выше, но с худшей поддержкой).

    С точки зрения кода, он похож на предварительный просмотр, но с действительно плохой поддержкой (нужны браузерные префиксы для тех, кто его поддерживает).

    Если вы хотите проверить, насколько они похожи, взгляните на этот другой похожий вопрос: CSS «inverse border-radius» за пределами ограничивающего прямоугольника элемента, чтобы создать дизайн выемки мобильного телефона.

  • Добавление 2-х псевдоэлементов с border-radius , box-shadow и background: transparent .

    Требуется немного больше кода, но выглядит он немного плавнее, по крайней мере, в Chrome Version 78.0.3904.108 , хотя разница минимальна. В любом случае, формы, которые вы можете сделать, не могут быть такими же сложными, как с предыдущими альтернативами, особенно если вы хотите работать с эллипсами, а не с кругами, как это происходит в вашем случае.

  • Использование SVG.

    Я думаю, что SVG-решение здесь не стоит, но было бы хорошей альтернативой для более сложных фигур или анимированных / переходных фигур. В любом случае, Temani Afif уже добавил решение с использованием SVG.

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

Вот как это будет выглядеть при использовании radial-gradient :

 body { margin: 0; font-family: monospace; background: #DDD; } .bar { background: white; position: fixed; bottom: 0; width: 100%; height: 60px; text-align: center; } .circle { position: relative; top: -10px; border-radius: 100%; background: white; width: 60px; height: 60px; margin: 0 16px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; color: black; transition: box-shadow ease-in 150ms; background: white; border: 0; outline: none; } .circle:hover { box-shadow: 0 16px 16px 0 rgba(0, 0, 0, .125); } .circle:active { box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .125); } .circle::before, .circle::after { content: ""; position: absolute; top: 4px; width: 32px; height: 6px; background: white; z-index: 1; } .circle::before { left: -18px; background: radial-gradient(ellipse at 0% -25%, transparent 0, transparent 70%, white 70%, white 100%); } .circle::after { right: -18px; background: radial-gradient(ellipse at 100% -25%, transparent 0, transparent 70%, white 70%, white 100%); } того body { margin: 0; font-family: monospace; background: #DDD; } .bar { background: white; position: fixed; bottom: 0; width: 100%; height: 60px; text-align: center; } .circle { position: relative; top: -10px; border-radius: 100%; background: white; width: 60px; height: 60px; margin: 0 16px; cursor: pointer; display: inline-flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; color: black; transition: box-shadow ease-in 150ms; background: white; border: 0; outline: none; } .circle:hover { box-shadow: 0 16px 16px 0 rgba(0, 0, 0, .125); } .circle:active { box-shadow: 0 8px 8px 0 rgba(0, 0, 0, .125); } .circle::before, .circle::after { content: ""; position: absolute; top: 4px; width: 32px; height: 6px; background: white; z-index: 1; } .circle::before { left: -18px; background: radial-gradient(ellipse at 0% -25%, transparent 0, transparent 70%, white 70%, white 100%); } .circle::after { right: -18px; background: radial-gradient(ellipse at 100% -25%, transparent 0, transparent 70%, white 70%, white 100%); } 
 {amp}lt;nav class="bar"{amp}gt; {amp}lt;button class="circle"{amp}gt;💖{amp}lt;/button{amp}gt; {amp}lt;button class="circle"{amp}gt;🚀{amp}lt;/button{amp}gt; {amp}lt;button class="circle"{amp}gt;🌍{amp}lt;/button{amp}gt; {amp}lt;/nav{amp}gt; 

Если вы хотите увидеть похожий вопрос и все альтернативы в действии, проверьте это: CSS «inverse border-radius» за пределами ограничивающего прямоугольника элемента, чтобы создать дизайн выемки мобильного телефона