Возможно ли сделать цельный фигурный блок с рабочим в нём overflow:hidden?

Question

[fred55rus]

Я разрабатываю ролевой чат и мне нужно сделать блок ввиде тучки для выражения мыслей пользователя, однако пробежавшись по гуглу я не нашёл для себя решения.
Условия у меня такие:
- В блок можно будет засунуть картинку и она должна занять всё пространство тучки, но не выходить за её края.
- На заднем фоне у сайта есть картинка, а значит пространство вокруг тучки должно быть прозрачным.
- Позиция тучки динамична, она может смещается в любую сторону и изменяться в размерах в зависимости от других элементов сайта и размера блока-контейнера.

Для примера откопал у себя картинку:

Как такое провернуть и возможно ли это вообще?

Comments

[Demian Smith]

Этот эффект называется "маска". Легко гуглится, если знать как оно называется.

Answer 1

[Stalker_RED]

clip-path же.
https://jsfiddle.net/t89nd42z/1 (тучку лучше в векторном редакторе нарисовать, не через path а при помощи дуг, например)

Comments

[fred55rus]

О, ништяк, но мне также нужно, чтобы в этом блоке можно было писать текст, в том числе поверх картинки.
Я перестроил твой пример под описанную мной задачу, но текст в этом блоке почему-то не отображается. Я уже слишком многого хочу? https://jsfiddle.net/t89nd42z/2/

[fred55rus]

О, и у меня все блоки обрамлены тенью, чтобы выделяться на фоновой картинке, а когда я её к этому блоку добавил, он стал весь чёрный https://jsfiddle.net/t89nd42z/3/
Тень придётся тоже отдельно вырисовывать?

[fred55rus]

И если я нарисую векторную тучу, то мне в любом случае нужно будет обрисовывать её в clip-path, чтобы обрезать контент, в чём тогда мысль использовать вектор?

[KazeZlat]

fred55rus, подключаете ее как SVG:

<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg>

И потом используете для вашего объекта
clip-path: url(#myPath)

[Stalker_RED]

fred55rus, просто у вас всего одна строка текста, и она была за границей облака.
https://jsfiddle.net/t89nd42z/4/
вообще можно в такие блоки любой контент помещать https://jsfiddle.net/t89nd42z/6/

[fred55rus]

KazeZlat, так, почему-то, не отображается фоновая картинка, просто чёрная фигура https://jsfiddle.net/t89nd42z/5/

[Stalker_RED]

fred55rus, возможно иногда lorempixel глючит, и отдает "черный квадрат" вместо картинки.

[fred55rus]

Stalker_RED, да, точно, обидно только, что box-shadow не работает, придётся страдать, чтобы эмитировать его эффект.