Как реализовать «вывернутые» скругленные уголки на CSS?

Question

[JackShcherbakov]

Здравствуйте! Я написал вот так виджет: https://codepen.io/CitizenOne/pen/JMezYd
Каким образом я могу сделать стык элементов menu__icon и menu__сontent плавным? Border-radius не помогает. Есть ли возможность сделать без вставки дополнительных картинок?

UPD:
Я хочу, что бы было вот так:priscree.ru/img/15921994f7ed10.jpg Внимание на форму!

Answer 1

[DivineDraft]

А почему не использовать единый цвет для обоих дивов?

Comments

[JackShcherbakov]

Я потом поменяю цвет, это просто черновик. Меня сейчас форма первого дива интересует.

[DivineDraft]

JackShcherbakov, плавным вы имеете виду - цвета, либо хотите эффект плавный появления?

[JackShcherbakov]

DivineDraft, Я хочу, что бы было вот так:priscree.ru/img/15921994f7ed10.jpg Внимание на форму! Приношу свои извенения за отсутствие конкретности с самого начала.

[DivineDraft]

JackShcherbakov, настолько плавно не подскажу, но можно углами используйте before и after сделайте треугольники либо части выпуклостей, который будут в конце первого дива и иметь opacity 0, при наведении opacity 1.

Как сделать тот или иной предмет:
https://html5book.ru/css-figury/
Там кстати есть сердце, если развернуть его правильно, то будет похоже на что вы ищите, но уже бы отрисовали это и все)

[JackShcherbakov]

DivineDraft, Спасибо! Сейчас научусь такие фигуры на css рисовать!