Создание прозрачной формы над изображением с CSS ⇐ CSS

[Anonymous]

Я пытаюсь повторить это изображение, но в коде. По сути, изображение в верхней части разрешено кровоточить в маленькую прозрачную форму под ним, а прозрачная форма находится на белом фоне.

Я пробовал. Я пришел ниже, который не работает и вообще не сработал (даже после изменения размера и попробовать перевернутое изображение).

, если кто -нибудь знает, как это нужно, что это нужно Я сделал это с ИИ, который помог мне в разные времена, но даже это не смогло этого сделать!

Код: Выделить всё

.white_bar {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 27px;
z-index: 5;
background: #fff;
clip-path: polygon(0.22px 0.05px, 0.22px 27.06px, 31.64px 27.06px, 31.64px 27.06px, 31.19062px 26.13065px, 30.15216px 24.1828px, 28.52114px 21.45075px, 26.29408px 18.1688px, 23.4675px 14.57125px, 20.03792px 10.8924px, 16.00186px 7.36655px, 11.35584px 4.228px, 6.09638px 1.71105px, 0.22000000000001px 0.050000000000001px, 31.69px 27.06px, 32.24489px 26.13065px, 33.49992px 24.1828px, 35.42563px 21.45075px, 37.99256px 18.1688px, 41.17125px 14.57125px, 44.93224px 10.8924px, 49.24607px 7.36655px, 54.08328px 4.228px, 59.41441px 1.71105px, 65.21px 0.05px, 65.21px 0.05px, 65.21px 27.05px, 31.69px 27.05px);
}

Спасибо!

Подробнее здесь: https://stackoverflow.com/questions/796 ... e-with-css