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

Question

JackShcherbakov @JackShcherbakov

CSS

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

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

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

Вопрос задан более трёх лет назад
152 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Решения вопроса 1

5 комментариев

JackShcherbakov @JackShcherbakov Автор вопроса

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

Написано более трёх лет назад
DivineDraft @DivineDraft

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

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

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

Написано более трёх лет назад
DivineDraft @DivineDraft

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

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

Написано более трёх лет назад
JackShcherbakov @JackShcherbakov Автор вопроса

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

Написано более трёх лет назад