Как свободно трансформировать углы блока / сверстать это?

Question

[sharpsss]

Доброго времени суток , есть вот такой вот блок

Надо сделать так чтобы юзер мог деформировать углы таким вот образом

Вопрос следующий, как это сверстать вообще эти впуклости и как будет работать layerX - отсчитывать от начала блока как на первом скрине или же на втором ? Вообще, достаточно будет инфы как это сверстать.. или как можно реализовать

Comments

[Алексей]

canvas ? каким образом он деформировать то будет

[sharpsss]

Алексей, нуу я думал drug and drop и какое-то свойство менять в процессе драга , а потом если что-то нужно внутрь положить(а нужно будет 100%) пользоваться layerX, если есть какие-то примеры на подобии с канвасом/без или инфа можно ссылочку плис

[Froggyweb]

что такое layerX?

[sharpsss]

Froggyweb,элемент который мы drop-аем у него есть такое вот свойство layerX
вот тут среди свойств элемента есть этот layerX - он от родителя отступ выдаёт , но не суть это пофигу, на touch не работает этот layerX там вообще по другому рассчитывается отступ от родителя - вот например

drag.style.left = `${touch.pageX - wrapper.offsetLeft - (drag.offsetWidth / 2)}px`;

Answer 1

[RAX7]

Comments

[sharpsss]

круто, большое человеческое спасибо)
Если интересно делаю такую штуку:
Это типа планировка будущего дома.

Я тут заметил что надо не только по углам а также и по рандомным точкам / по периметру - то есть можно нажать и сделать "растяжение квадратиком" которое сейчас имеется на углах например на середине объекта, думаю сегодня днём сяду разберусь с этим)) большое спасибо ещё раз)

Answer 2

[coder_racer]

clip-path: polygon(46% 0, 45% 50%, 100% 50%, 100% 100%, 0 100%, 0 0);
https://bennettfeely.com/clippy/