Я создаю небольшой веб-сайт, и я хотел поэкспериментировать с современным непрямоугольным подходом к изображениям героев, но я не уверен, как это сделать. Вот пример того, чего я пытаюсь достичь. Любое руководство будет высоко ценится.
Используйте изображение маски png на картинке.
https://i.stack.imgur.com/ReAR9.png
.wrap {position:relative;width:969px;height:300} .wrap .bg {height:300px;background:url(https://images5.alphacoders.com/523/thumb-1920-523395.jpg) no-repeat 0 0;background-size:cover} .wrap .mask {position:absolute;bottom:0;left:0;width:100%;height:74px;background:url(https://i.stack.imgur.com/ReAR9.png) no-repeat 0 0}
<div style="width:969px;margin:0 auto"> <div class="wrap"> <div class="bg"></div> <div class="mask"></div> </div> <div> Content </div> </div>
Я не уверен, почему вы получили так много отрицательных голосов, но я знаю решение этой проблемы. Чтобы создать что-то подобное, вам нужно использовать SVG. Масштабируемая векторная графика (SVG) - это элемент в HTML, используемый для рисования сложного пути, однако многие люди используют для его создания онлайн-инструменты, такие как GIMP, Adobe Illustrator или Inkscape. Вы рисуете их в программе и экспортируете данные пути в ваш HTML-документ. Я надеюсь, что это поможет вам и вашему растущему сайту. https://inkscape.org/ - Inkscape https://www.gimp.org/ - GIMP
Отличный способ сделать это с помощью SVG Clipping Path. Этот веб-сайт позволяет вам создать желаемый путь, а затем он автоматически сгенерирует CSS, необходимый для его создания.
https://bennettfeely.com/clippy/
