Разделить блок надвое, css?

Question

[ch-aqwer]

Добрый день! Имею следующий вопрос.
Нужно разделить блок надвое, не было бы проблемой если бы это был только бэкграунд, но в блоке есть еще кнопки и другие элементы, то есть, вместе со всеми элементами нужно разделить блок или целую страницу на двое. Желательно только css/sass. Нужно для css анимации
Пример
Буду благодарен за любые варианты, идеи!

Answer 1

[timokins]

Создайте два идентичных блока и наложите их друг на друга (один скройте),
при наведении отобразите оба и раздвиньте их на нужное расстояние,
при этом их содержимое сдвиньте на 50% в нужном направление и через overflow закройте торчащие части.

Comments

[ch-aqwer]

Интересная идея, но они будут не так обрезаны... если просто задать left, right.

Answer 2

[Рюрик Ростиславич]

.container {display:block; padding:5px; }
.left {width:50%; border-left:1px dotted black;}
.right {width:50%; float:right;}

<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>

Хотя скорее всего у вас в css есть разметка , просто разделить контейнер на six six

Comments

[ch-aqwer]

Мне это для анимации нужно, надо чтоб эти два блока разъехались, то есть кнопка разделилась на две части и они розехались в две стороны.

[Dark Hole]

ch-aqwer: два блока

Answer 3

[Амир Алимжанов]

Как я понял страница будет как бы разрываться на две части в разные стороны и будет появляться новая? Тогда лучше на js