Как сделать такую маску в CSS?

Question

[ssawyer]

Есть подложка под текстом вот такой формы. Если подставлять через mask и background-image встает все четко до того момента, пока в блоке не будет больше текста. Возможно ли как то растягивать нижнюю часть от контента, или может быть можно как то такую форму через css сделать. clip-path не подходит, там нельзя скруглить углы

<svg width="1021" height="224" viewBox="0 0 1021 224" fill="none" xmlns="http://www.w3.org/2000/svg">
  <g filter="url(#filter0_b_1_647)">
    <path d="M1020 127.097V17C1020 8.16347 1012.84 1.00002 1004 1.00002H479C470.163 1.00002 463 8.16345 463 17V61.0972C463 69.9337 455.837 77.0972 447 77.0972H17C8.16344 77.0972 1 84.2606 1 93.0972V207C1 215.837 8.16342 223 17 223H903C911.837 223 919 215.837 919 207V159.097C919 150.261 926.163 143.097 935 143.097H1004C1012.84 143.097 1020 135.934 1020 127.097Z" fill="url(#paint0_linear_1_647)" fill-opacity="0.34" />
    <path d="M1020 127.097V17C1020 8.16347 1012.84 1.00002 1004 1.00002H479C470.163 1.00002 463 8.16345 463 17V61.0972C463 69.9337 455.837 77.0972 447 77.0972H17C8.16344 77.0972 1 84.2606 1 93.0972V207C1 215.837 8.16342 223 17 223H903C911.837 223 919 215.837 919 207V159.097C919 150.261 926.163 143.097 935 143.097H1004C1012.84 143.097 1020 135.934 1020 127.097Z" stroke="white" stroke-width="0.8" />
  </g>
  <defs>
    <filter id="filter0_b_1_647" x="-8.40002" y="-8.3999" width="1037.8" height="240.8" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-opacity="0" result="BackgroundImageFix" />
      <feGaussianBlur in="BackgroundImageFix" stdDeviation="4.5" />
      <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1_647" />
      <feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1_647" result="shape" />
    </filter>
    <linearGradient id="paint0_linear_1_647" x1="-41" y1="-41" x2="1027" y2="302" gradientUnits="userSpaceOnUse">
      <stop stop-color="white" />
      <stop offset="1" stop-color="#EDEDED" />
    </linearGradient>
  </defs>
</svg>

Comments

[Ankhena]

Псевдо с радиальными градиентами или svg и drop-shadow

Можно поискать по моим ответам/комментариям, уже несколько раз давала целый комплект ссылок на песочницы с решениями.

Answer 1

[Aetae]

clip-path прекрасно умеет скруглять, rtfm.

Вот через фильтр, когда-то похожее делал:

Принцип прост: размываешь подложку через feGaussianBlur, делаешь края снова резкими через ComponentTransfer альфа-канала. В твоём случае ещё stroke и drop-shadow наверное понадобятся, сам смотри.

...upd: из интереса нафигачил без фильтров:

Всё возможно.:)

Поигрался пут с фильтром, вот версия фильтр + простой clip-path, поддерживает полупрозрачность фона, полупрозрачность бордера и тень:

clip-path'ом вырезаем простые квадраты, фильтром закругляем. Фильтр можно в принципе применять к любому набору элементов. Версия не последняя, есть шероховатости, может ещё когда-нить потыкаю ещё.:)

Comments

[ssawyer]

Да, но если делать прозрачность фона как на картинке, то обводки будут видны. И вот не знаю как с клиентом в этом случае взаимодействовать)

[Aetae]

ssawyer, про прозрачность ничего не было, лол. Картинка шакальная, ничего не понятно.
Но прозрачность можно всему этому дерьму сразу придать, если не страшно что текст прозрачный слегка будет. Иначе таки придётся фильтры подключать. Ну или городить дублирование в html: подложка с прозрачностью и невидимым текстом, и поверх неёё тоже амое без bg и с видимым текстом.

Впрочем сделать так чтобы была внешняя тень но небыло внутренней(под прозрачностью) - это вообще стандартными средствами никак. Проще послать разошедшегося дизайнера нахрен.

А если это говно хочет заказчик - фигач 1 пнгшку под один размер. Не твои проблемы.
Либо если хочешь сделать это своей проблемой - нарежь пнгшку в спрайт и расположи как надо, можно даже табличкой, как в старые добрые времена ie6. Будет работать и не требует напряжения мозга. Мб где-то в интернете даже сохранились тулзы для этого.

[ssawyer]

Aetae, проще уж сказать чтобы упростили тогда))

[ImagineTables]

Как же аццки это всё тормозит на клиенте. (При обычной прокрутке на не самом слабом компьютере подзалипает).

Я бы отрастрировал и сделал 9-split. Он, к сожалению, в обычных браузерах нативно в CSS не поддерживается, но понятно, как его заворкораундить.

[Aetae]

Поигрался пут с фильтром, вот версия фильтр + простой clip-path, поддерживает полупрозрачность фона, полупрозрачность бордера и тень:

clip-path'ом вырезаем простые квадраты, фильтром закругляем. Фильтр можно в принципе применять к любому набору элементов. Версия не последняя, есть шероховатости, может ещё когда-нить потыкаю ещё.:)