I'm facing a challenge in making an input field and button functional even when they are positioned behind a uniquely shaped PNG image.
https://i.stack.imgur.com/eOg0N.jpg
Initially, I believed that by applying a shape to the image, it would automatically detect the shape boundaries allowing interaction with the button or input field.
.element { float: left; height: 150px; width: 1300px; shape-outside: img('path/to/red-image-with-shape.png'); }
https://i.stack.imgur.com/2xXEe.png
Note: The screenshot depicts a scenario where a user scrolls upwards. Despite this scrolling effect, the designer aims to retain accessibility of the form elements in such situations.