Показать сообщение отдельно
  #1 (permalink)  
Старый 13.10.2010, 00:56
Интересующийся
Отправить личное сообщение для Acrossfy Посмотреть профиль Найти все сообщения от Acrossfy
 
Регистрация: 25.03.2009
Сообщений: 15

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