Как анимировать блок так, чтобы он раскрывался равномерно?

Question

[_ umr]

Есть блок

Эта косая линия должна по клику раскрываться в обе стороны как указано стрелками. Но вот как это ровно сделать хз. Я сместил ее left: 50% и сделал ей ширину 150px, по клику я делаю left: 0 и ширину 100% эффект не такой как я ожидал. Нид хелп

Answer 1

[Андрей Свердлов]

Можно еще так. Только у меня по ховеру

Answer 2

[devstudent]

need code!, а вообще , возможно, надо менять только размеры , а позицию оставлять как есть , то есть 50%.
+ transition для плавности.
попробуйте менять размеры через свойство transform:scale(1); -> transform:scale(1.5); transfrom-origin:center center; как-то так ...

Comments

[_ umr]

не через скейл ваще хуйня выходит

Answer 3

[Dark Hole]

Ничего удивительного. Нужно делать скорее всего все либо относительно, либо жестко
Если вы дали бы пример на CodePen.io - были более конкретные предложения

Comments

[_ umr]

честно сказать не понял вашего послания

[Dark Hole]

_ umarov: относительно - это вроде %. Жестко - это рх