Как сделать внешние скругленные внутрь углы для элемента?

Question

[mishapsv]

Для футера с position: fixed; нужно сделать внешние скругленные внутрь углы. При этом, чтобы область между ними была прозрачной. Может быть есть идеи, как это сделать? На скриншоте синий блок снизу с текущей песней.

Answer 1

[Rustam Bainazarov]

Можно без фиксированной высоты синего блока и без absolute'а. Старый-добрый отрицательный margin + дополнительный padding сверху на размер border-radius.



Вообще, оную задачу можно решить множеством способов.

Update. В данном конкретном случае, т. к. макет из вопроса отличается от того, что вам нужно, то, модифицируя ваш код, можно так, например:



Обратного закругления в CSS нет. Только визуальными хаками это можно сделать.

Comments

[mishapsv]

Рустам Байназаров но получается, если нижний блок прибит фикседом снизу, а остальная часть прокручивается, это не сработает?

[Rustam Bainazarov]

mishapsv, какая часть должна прокручиваться?

[Rustam Bainazarov]

mishapsv, это? Я не понимаю, если честно.

[mishapsv]

Рустам Байназаров https://codepen.io/mishapsv/pen/WNbOezd
как в примере: футер прибит и у него должны быть эти закругления, а остальная часть прокручивается.

[Rustam Bainazarov]

mishapsv, ну так, например:

[Rustam Bainazarov]

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

[mishapsv]

Рустам Байназаров, да, мой косяк, на скриншете не совсем правильно. Будет именно всегда прибитый фикседом футер-плеер, к в примере. И вот для него нужно сделать эти закругления.

[Rustam Bainazarov]

mishapsv, ну в данном конкретном случае, можно так, например:



Обратного закругления в CSS нет. Только визуальными хаками это можно сделать.

Обновил ответ.

[mishapsv]

Рустам Байназаров супер! спасибо!

Answer 2

[dom1n1k]

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

Comments

[mishapsv]

dom1n1k не, я же написал, что между закругленными углами должна быть прозрачная область.

Answer 3

[v3shin]

border-radius ?