Как сделать эффект трубы?

Question

[Davlik]

Как можно дать такой объем фигуре?
Нужно, чтобы объект "оборачивал" другой объект, как на фото

Answer 1

[Олег]

https://jsfiddle.net/joomla/2sww3auq/1/

Comments

[Davlik]

Спасибо!

Answer 2

[utyfua]

Могу предположить что слева просто обычное закругление стоит а с другой стороны нужен доп элемент(псевдоэлемент тоже должен сгодиться) а в нем уже прописать саму "выемку". Вроде это можно сделать на css но это лишь мысля.
Но проще через background все замутить просто и элегантно)

Comments

[Davlik]

Хотелось бы реализовать на чистом css, без бэкграундов.
Тоже думал, что должен быть доп.элемент. Но что-то не могу сообразить

[utyfua]

Davlik: попробовать сделать? не отвечаю за результат :)

[Davlik]

utyfua: если вам не сложно :)

[utyfua]

Davlik: попробовал но мягко говоря не вышло.. я как-то особо с css не особо встречаюсь.. лучше background варианта нет..

[Davlik]

utyfua: Попробую background'ом, спасибо

[Олег]

utyfua: Варианта нет, гогда на крышку гроба падетет земля))) https://jsfiddle.net/joomla/2sww3auq/1/

Answer 3

[riot26]

Спрайтами. Нет смысла заморачиваться с SVG или псевдоэлементами.