Как создать изогнутую верхнюю границу в центре фиксированной нижней панели (с бесшовной границей и фоном)? ⇐ CSS

[Anonymous]

Я работаю над фиксированной навигационной панелью в нижней части страницы. Я хочу добавить изогнутую форму (например, закругленную «Notch») в верхний центр этой панели.
Пример:

lefud. Чтобы создать кривую с границей-радисом, и она в основном работает, но решение не идеально, Z-индекс не помогает. < /p>
Сложная часть: < /strong>
Мне нужна граница кривой, чтобы плавно сочетаться с границей бара, так что она выглядит как одна непрерывная граница (даже при изменении темы, как в. Кроме того, я хочу, чтобы фактический контент внутри панели оставался незатронутым-я не хочу реструктурировать или перемещать DOM, просто чтобы соответствовать кривой. Я хотел бы услышать идеи или умные уловки..background {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 10;
background: grey;

.root_inverted & {
background: red;
}

&::before {
content: '';
position: absolute;
top: -15px; // curve height
left: 50%;
transform: translateX(-50%);
width: 60px; // curve width
height: 30px;

border-top-left-radius: 30px;
border-top-right-radius: 30px;

background-color: grey;
border: 1px solid red;
border-bottom: none;

z-index: 1;

.root_inverted & {
background-color: yellow;
}
}
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... -with-seam