Срезание дива по диагонали
 

Здравствуйте, ситуация довольно необычная. У меня имеется див статичной шириной, скажем 200 пикселей и растянутый на всю высоту странички. Диву задан повторяющийся в высоту фон, сложный паттерн с узором.
Задача - срезать нижнюю часть дива №1 (я приложил наглядную схематичную иллюстрацию) по диагонали. Диагональный срез должен быть 20 градусов, плюс поскольку за нашим дивом имеется второй див с повторяющимся с фоном, срез должен быть прозрачным.
Была идея сделать паттерн фона с прозрачным вырезанным углом снизу справа и сверху слева, но тут этот вариант не подходит, т.к. в условиях данной верстки фон обязательно должен начинаться от верхнего левого угла дива, а высота странички будет постоянно меняться(из-за длины паттерна нужной "стыковки" внизу не получится). Сделать тоже с дивом под вторым номером нельзя, т.к. на правой стороне страницы все повторится зеркальным образом.
Я начал гуглить по поводу плагинов jquery для закругления углов. Видел, что они еще и срезать углы умеют. Но почти все они делают это скриптами и срезают строго на 45 градусов. На офф сайте данного фреймворка я нашел плагины, которые используют пнг как основу для среза углов, но ни на один из этих плагинов ссылки на доки, примеры и даже на скачку уже не работают (по прошествии немалого времени). Другие найденные гуглом плагины не дают прозрачности срезанным углам, или не совместимы с дивами, у которых сложный фон.
Собственно поэтому мне ничего другого не остается, как обратиться к экспертам.
Буду благодарен за любую наводку, помощь или совет в данной ситуации (про переделать дизайн - не принимается, заказчик барин).

Как вариант, постучать по голове дизайнеру за незнание основ создания макетов для веб и попросить переделать.

Еще можно посмотреть в сторону SVG/VML, но расположить SVG в виде фона растягивающегося блока сейчас только Opera умеет, придется помучиться, чтобы расположить блок с SVG под текстом.

Я и есть этот дизайнер) Основы верстки прекрасно знаю, на что шел тоже знал. Сделать подобный дизайн, да еще и резиновый в высоту и ширину - желание заказчицы, а иного она и видеть не хочет.
Что касается SVG, то тут я честно не специалист, работать с ним не умею. Что касается текста, то на этих блоках его совсем не будет, они чисто декоративные.

Ну можно извращаться сделав сотню дивов(каждый чуть короче) и меняя динамически бгпозищн. Но это такая бяка.
Если вы дизайнер - то постучите по голове себе.)

Пойдём от обратного: почему нельзя сделать фиксирование фона левого блока или заднего фона по низу, и соот-но срезанную картинку на угол?
Возможно эту проблему можно будет проще а главное красивее преодолеть.)

хороший повод разобраться с svg

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

Так я специально выделил слово "почему": что за абстрактные нужды дизайна?)
Впрочем пустое - мучайте svg и будет вам счастье.)

Про SVG честно пытался гуглить, но ничего кроме фотошопа и графического формата не находит. Был бы признателен, если бы меня ткнули носом в статью о применении SVG в верстке.
Насчет асбстрактных нужд дизайна я с вами полностью согласен. Но я уже говорил, заказчик-барин, приходится искать выход)
В свое оправдание скажу, что дизайн изначально планировался статичный в ширину, тогда бы проблемы не было. Но у меня потребовали еще и в ширину тянуть, поэтому и возникла головная боль.

Мсье знает толк в извращениях.

Держите. Под IE, как обычно, работать не будет.

Ещё можно капнуть в сторону canvas

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

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

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

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

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

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

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

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

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