How to animate a block so that it expands evenly?

Question

css

There is a block

This slanting line should open in both directions on click as indicated by the arrows. But here's how to do it exactly xs. I moved it to left: 50% and made it 150px wide, on click I make it left: 0 and 100% width the effect is not what I expected. Need help

Answer 1

It's still possible . Only on my hover

Answer 2

need code!, but in general, it may be necessary to change only the dimensions, and leave the position as it is, that is, 50%.
+ transition for smoothness.
try resizing via transform:scale(1); -> transform:scale(1.5); transfrom-origin:center center; something like this ...

Answer 3

Nothing surprising. It is necessary to do most likely everything either relatively or rigidly
If you would give an example on CodePen.io - there were more specific suggestions