s257

Жму руку дизайнеру, молодец, не как у всех.

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

Изначально я не обратил внимания, что нижний край строго горизонтальный, и накидал такое как стартовую точку



Но когда заметил - понял, что так в принципе не выйдет сделать, на CSS нельзя "зафиксировать от трансформации" две стороны сразу.

Так что остаётся вариант с фоновой SVG-шкой, что по сути "фоновая картинка", либо вариант со вставкой этой SVG напрямую в кнопку (прям инлайном) и дальнейшие манипуляции с ней, если требуется адекватный ховер.

Делать лень, это нетрудно :)

Загружаете от пользователя PDF и PNG.
ImageMagick для получения картинок экранного качества для того и другого.
Выдаете эти картинки пользователю на странице, маетесь с JS, позволяя перетащить одно относительно другого. Получаете координаты.
В mPDF используете изначальный PDF как фон, на него накладываете PNG по координатам, генерируете новый PDF и отдаете пользователю.

Основа такая. По ходу будут сложности типа необходимости правильно смасштабировать тот PNG - но это уж решайте сами, если справитесь с основой.

З.Ы. А мечты о том, чтобы "редактировать PDF" (и уж тем более сделать по этому поводу что-то свое) выкиньте сразу. Даже создатель формата - гигант Adobe - не смог сделать вменяемого редактора этого формата. Формат изначально заточен под вывод, а не для правки.