Javascript.RU

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

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

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

Еще можно посмотреть в сторону SVG/VML, но расположить SVG в виде фона растягивающегося блока сейчас только Opera умеет, придется помучиться, чтобы расположить блок с SVG под текстом.
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2010, 01:48
Интересующийся
Отправить личное сообщение для Acrossfy Посмотреть профиль Найти все сообщения от Acrossfy
 
Регистрация: 25.03.2009
Сообщений: 15

Я и есть этот дизайнер) Основы верстки прекрасно знаю, на что шел тоже знал. Сделать подобный дизайн, да еще и резиновый в высоту и ширину - желание заказчицы, а иного она и видеть не хочет.
Что касается SVG, то тут я честно не специалист, работать с ним не умею. Что касается текста, то на этих блоках его совсем не будет, они чисто декоративные.
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2010, 02:08
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

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

Пойдём от обратного: почему нельзя сделать фиксирование фона левого блока или заднего фона по низу, и соот-но срезанную картинку на угол?
Возможно эту проблему можно будет проще а главное красивее преодолеть.)
Ответить с цитированием
  #5 (permalink)  
Старый 13.10.2010, 02:18
Профессор
Отправить личное сообщение для tenshi Посмотреть профиль Найти все сообщения от tenshi
 
Регистрация: 20.03.2008
Сообщений: 1,183

хороший повод разобраться с svg
__________________
.ня
Ответить с цитированием
  #6 (permalink)  
Старый 13.10.2010, 02:21
Интересующийся
Отправить личное сообщение для Acrossfy Посмотреть профиль Найти все сообщения от Acrossfy
 
Регистрация: 25.03.2009
Сообщений: 15

Aetae, я писал, что подобный вариант не подходит, т.к. по дизайну фон всегда обязательно должен фиксироваться сверху у левого блока. А у нижнего это не прокатит, из-за того, что с правой его стороны будет тоже угол, тоже зеркальный.
Ответить с цитированием
  #7 (permalink)  
Старый 13.10.2010, 02:29
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,503

Так я специально выделил слово "почему": что за абстрактные нужды дизайна?)
Впрочем пустое - мучайте svg и будет вам счастье.)
Ответить с цитированием
  #8 (permalink)  
Старый 13.10.2010, 14:53
Интересующийся
Отправить личное сообщение для Acrossfy Посмотреть профиль Найти все сообщения от Acrossfy
 
Регистрация: 25.03.2009
Сообщений: 15

Про SVG честно пытался гуглить, но ничего кроме фотошопа и графического формата не находит. Был бы признателен, если бы меня ткнули носом в статью о применении SVG в верстке.
Насчет асбстрактных нужд дизайна я с вами полностью согласен. Но я уже говорил, заказчик-барин, приходится искать выход)
В свое оправдание скажу, что дизайн изначально планировался статичный в ширину, тогда бы проблемы не было. Но у меня потребовали еще и в ширину тянуть, поэтому и возникла головная боль.
Ответить с цитированием
  #9 (permalink)  
Старый 13.10.2010, 16:47
Аватар для subzey
Пионэр
Отправить личное сообщение для subzey Посмотреть профиль Найти все сообщения от subzey
 
Регистрация: 16.11.2009
Сообщений: 1,322

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

Держите. Под IE, как обычно, работать не будет.
Вложения:
Тип файла: zip h.zip (93.3 Кб, 20 просмотров)
Ответить с цитированием
  #10 (permalink)  
Старый 13.10.2010, 19:15
Аватар для sysya
Профессор
Отправить личное сообщение для sysya Посмотреть профиль Найти все сообщения от sysya
 
Регистрация: 27.12.2009
Сообщений: 292

Ещё можно капнуть в сторону canvas
__________________
Нет предела совершенству...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Автоматическая прокрутка дива вниз progi2007 Общие вопросы Javascript 16 16.04.2014 23:15
Расположения главного дива по центру lammeR (X)HTML/CSS 3 03.04.2010 16:16
Присвоение высоте дива значения window.innerHeight Capitano Элементы интерфейса 7 26.12.2009 15:54
Еще один вариант плавно раскрывающегося дива (экспандер, спойлер) Alekson Ваши сайты и скрипты 0 23.12.2008 03:01
как редактировать размер дивА NiceOne Общие вопросы Javascript 8 29.03.2008 05:52