Javascript-форум - Перекрытие объектов по диагонали

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Перекрытие объектов по диагонали (https://javascript.ru/forum/misc/58638-perekrytie-obektov-po-diagonali.html)

Перекрытие объектов по диагонали

Возникла необычная задача. И я не представляю возможно ли вообще сделать такое. Прошу подсказать.

Сайт представляет из себя одну страницу, которая содержит два раздела (контейнера), между которыми осуществляется переключение.

По умолчанию на экране отображается часть одного раздела и часть другого, в виде треугольников, прислоненных друг к другу диагоналями:

При наведении на один из треугольников, другой должен смещаться до полного исчезновения, раскрывая содержимое первого:

и наоборот:

реально ! только это все делается на CSS http://htmlbook.ru/blog/treugolniki-cherez-css

Цитата:

Сообщение от caetus (Сообщение 390596)

реально ! только это все делается на CSS http://htmlbook.ru/blog/treugolniki-cherez-css

Вы точно обратили внимание на содержимое поста?
Вопрос остается открытым.

spo,
как вариант: 2 картинки одна под другой. Отрисовать на канвасе или svg и анимированно затирать/рисовать картинку сверху.

как вариант: на css тоже можно сделать, caetus, все правильно сказал. Только понадобится куча вспомогательных элементов

Цитата:

Сообщение от tsigel (Сообщение 390609)

Я такое не то что на canvas или svg, но даже в фотошоп при помощи слоев и маск не отображу. Возможно я ошибаюсь, но мне кажется вы не до конца понимаете задачу.

Вы написали 2 картинки одна под другой, что в принципе противоречит условию. Если одна A под другой B, то при смещении B будет появляться A - все правильно, но при смещении A не будет появляться Б.

caetus написал не читая и привел ссылку не по теме.

А ваша идея с затиранием и отрисовыванием это хоть чтото, но я так и не могу понять как будет происходить отрисовывание контента который отображается под каждым из треугольников.

сделаешь дальше сам если не можешь то работа в другом разделе!

<style>
.wrap {
    position: relative;
    margin: 100px;
    width: 300px;
    height: 140px;
    border: 1px solid #999;
    overflow: hidden;
}
.wrap div {
    position: absolute;
    width: 110%;
    height: 100%;
}
.wrap div span {
    position: absolute;
    font-size: 2em;
}
.wrap div:nth-child(1) {
    transform-origin: 0 0;
    transform: rotate(25deg);
    background: #ccc;
} 
.wrap div:nth-child(2) {
    right: 0;
    transform-origin: 100% 100%;
    transform: rotate(25deg);
    background: #036;
} 
.wrap div:nth-child(1) span {
    top: 25%;
    left: 25%;
    transform: rotate(-25deg);
    color: #036;
}
.wrap div:nth-child(2) span {
    top: 55%;
    right: 25%;
    transform: rotate(-25deg);
    color: #fff;
}
</style>

<body>
<div class="wrap">
    <div><span>Hello</span></div>
    <div><span>World</span></div>
</div>
</body>

Цитата:

Сообщение от caetus (Сообщение 390748)

сделаешь дальше сам если не можешь то работа в другом разделе!

С задачей справился.
А твоя подсказка из разряда "попробуй html+css".