Добрый день! Как правильно сделать верхний border-top-right-radius? Чтобы он был вогнут с границей?

Question

[MaXX77777]

Получилось сделать очень костыльными методами, хотелось бы до конца разобраться в этом вопросе, как правильно сделать такой угол. Чтобы background (картинка) была видена, находил много способов, но в основном все они были выполнены на белом при помощи before и after.

Подскажите с примером. Благодарю.

Answer 1

[Максим]

Дальше сами, 90% сделано
Нарисовал на SVG так как ни одного адекватного ответа не увидел
Если что то не получится пишите, постараюсь помочь ..
Дэмо: https://codepen.io/topicstarter/pen/ZEyMrgV

Comments

[MaXX77777]

Спасибо, за помощь!
Это можно сделать без использования svg?
Подскажите какой редактор использовали?

Answer 2

[Стефан]

Сделать фон карточки через svg и отпозиционировать, как по мне самый простой, и понятный способ

Answer 3

[Варлам Ерофеич]

— Здесь достаточно примеров...

Comments

[wisgest]

И где здесь «вогнут с границей»?

[Варлам Ерофеич]

wisgest, я ответил на реплику —

Подскажите с примером. Благодарю.

Пример создания масок и их клонов - есть.
Пример создания рамок и их стилизации - есть.
Метод координации и вырезания шаблонов фигур - есть.
Не хватает лишь документации по использованию svg.js, но и её можно поискать. (если автор вопроса сам её не сможет найти, пусть напишет об этом, постараюсь помочь в поиске)...