Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Срезание дива по диагонали (https://javascript.ru/forum/jquery/12338-srezanie-diva-po-diagonali.html)

monolithed 13.10.2010 19:37

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

а во-вторых сделать это еще проще картинкой (как это делается в 99,9% случаев)

Acrossfy 13.10.2010 22:32

monolithed, ну во первых кроссбраузерность нужна. ИЕ6 не счет, но остальное важно. Во-вторых это не тот случай, когда можно сделать картинкой. див 1 тянется в высоту на всю страницу. Паттерн не короткий, и сверху должен стыковаться, поэтому картинкой это не делается.
subzey, спасибо, решение интересное, но ИЕ тоже нужен.. В 9-ом кстати тоже не заработало.
Ситуация разрешилась проще. Все же удалось уговорить заказчицу поменять кое-что, чтобы это стало возможно сверстать.
Спасибо всем большое за советы и помощь, извиняюсь, что нагрузил подобным.

Gvozd 14.10.2010 07:17

Если левый край #div2 четко совпадает с левым краем #div1 При любых телодвижениях, то:
ввести #div3
его ширина равна ширине #div1, а высота равноа высоте #div2
его левый верхний уголй всегда совпадает с левым верхним углом #div2
его z-index больше чем у #div1
его фоновым рисунком задан прямоугольник разделенный по диагонали
правый-верхнйи угол полностью прозрачный(и отображает верный кусок #div1 не зависимо от смещения), а нижний-левый закрашен так же как и #div2, так чтобы плавно переходить в него на совей границе.
кажется все, и все это прекрасно реализуется с помощью голого CSS же, если я ничего не путаю.
размещение текстового и прочего контента в #div1 и #div2 уже будет не так просто, но ТС-у этого воде и не надо

Acrossfy 14.10.2010 10:48

Gvozd, именно так я уже и сделал, после внесения правок в дизайне. Для этого способа требовалось, чтобы фон дива1 позиционировался снизу. Но дело в том, что при первом варианте дизайна, вверху фон дива1 должен был стыковаться с другим дивом. А это было бы невозможно при позиционировании снизу, т.к. высота странички постоянно менялась.
Но все равно спасибо, что откликнулись)

monolithed 14.10.2010 11:47

Если честно я не понимаю почему это вызвало у вас трудности?
пусть даже высота меняется, это реализуется в два счета:
Если div1 - это верх, div2 - середина, div3 - низ, и даже если div3 прижат к низу, а div2 не имеет фиксированной высоты, в самом худшем случае, что может это делается с помощь позиционирования:

margin: 0px 0px -100000px 0px;
padding: 0px 0px 100000px 0px;
position: relative;

в лучшем случае фону для div2 назначается repeat-y и он четко прижимается к div3

Acrossfy 15.10.2010 11:00

Вы совсем не так поняли ситуацию, но все равно спасибо советы.


Часовой пояс GMT +3, время: 22:00.