Как верстается такой элемент?

Question

[chelnokov_a]

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

Comments

[Lynatik001]

а посмотреть исходный код на том сайте не судьба? Это же верстка, ее верстка(стили,js.html) отображается в коде.

[chelnokov_a]

Спасибо за отличный совет. Только, к сожалению, не судьба. Поскольку на скриншоте не сайт, а макет сайта.

[chelnokov_a]

Lynatik001, Если у вас есть сайт где такое уже реализовано, поделитесь, пожалуйста, ссылкой. Буду очень признателен.

[Максим]

chelnokov_a, а если картинку из psd взять и на фон поставить - вариант ?

[chelnokov_a]

Максим Ленский, Думал об этом. Но хотелось бы избежать этого. Вижу самое оптимальное решение в clip path у псевдо элемента, но мало ли знатоки что-то более красивое предложат

[Максим]

chelnokov_a, может быть svg или запариться с css - делов много тут

[Lord_Dantes]

Вырезать изгиб в svg и выставить туда псевдо-элементом возможно?

[Максим]

chelnokov_a, у меня такая порнография получилась

[Ankhena]

Обычные скругления и псевдоэлемент с кусочком радиального градиента.

Это пример https://jsfiddle.net/Ankhena/xjpefyq0/ от другого вопроса, но его достаточно для решения этой задачи.

Answer 1

[Ankhena]

В размеры сами поиграйте.

Comments

[chelnokov_a]

Супер! То что надо. Большое спасибо, за уделенное время.

[Ankhena]

chelnokov_a, тогда отмечайте решением, раз то, что надо. Так и другим будет понятно.