Как сделать не прямоугольную форму с одним фоном

[bob_24]

Нужно сделать как на картинке:

т.е. у прямоугольной формы еще и треугольник внизу. Но проблема в том что фон для них один. Можно увидеть как темная полоса продолжается на треугольнике. И конечно это не фиксированной ширины.)

Подскажите, можно ли такое реализовать?

[psywalker]

По-моему у варианта Rash`a тоже есть проблемы с фоном)

Да и можно сделать проще ) И неоднородный фон в пролете, конечно.

Дружище, а ты не знаешь лекарство для Хрома случаем?

[Softlink]

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

[psywalker]

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

А ты не мог бы его сделать и продемонстрировать плз.

[Softlink]

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

А ты не мог бы его сделать и продемонстрировать плз.

http://jsfiddle.net/Softlink/PXHjy/

[psywalker]

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

А ты не мог бы его сделать и продемонстрировать плз.

http://jsfiddle.net/Softlink/PXHjy/

Да, но так не пойдёт. Сравни мой и свой варианты. У тебя фон тупо на месте стоит. Это не есть гуд.

[Softlink]

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

А ты не мог бы его сделать и продемонстрировать плз.

http://jsfiddle.net/Softlink/PXHjy/

Да, но так не пойдёт. Сравни мой и свой варианты. У тебя фон тупо на месте стоит. Это не есть гуд.

1) да какая разница) Эффект тот же произведет - продолжение фона.

2) именно поэтому и говорю, что надо придумывать какое-то универсальное решение.

[psywalker]

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

А ты не мог бы его сделать и продемонстрировать плз.

http://jsfiddle.net/Softlink/PXHjy/

Да, но так не пойдёт. Сравни мой и свой варианты. У тебя фон тупо на месте стоит. Это не есть гуд.

1) да какая разница) Эффект тот же произведет - продолжение фона.

2) именно поэтому и говорю, что надо придумывать какое-то универсальное решение.

Не, извини, но это не то, реально. Разница на лицо. На данный момент, что я вижу, это наше решение, которое не пашет в Хроме и всё. Уже появилась идея реализации, будем пробовать.

[lexxcode]

Вам так что ли надо??

Я вот не придумал, как избавится от лишнего элемента в блоке...

[psywalker]

Вам так что ли надо??

Я вот не придумал, как избавится от лишнего элемента в блоке...

Алекс, блин, не много не то. Зацени, как уголок ходит http://jsfiddle.net/hML5x/3/. У вас тупо сделана подгонка под фикс, а здесь нет.

[lexxcode]

Вам так что ли надо??

Я вот не придумал, как избавится от лишнего элемента в блоке...

Алекс, блин, не много не то. Зацени, как уголок ходит http://jsfiddle.net/hML5x/3/. У вас тупо сделана подгонка под фикс, а здесь нет.

Так у тебя фон уголка не совпадает с фоном блока

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

[psywalker]

Вам так что ли надо??

Я вот не придумал, как избавится от лишнего элемента в блоке...

Алекс, блин, не много не то. Зацени, как уголок ходит http://jsfiddle.net/hML5x/3/. У вас тупо сделана подгонка под фикс, а здесь нет.

Так у тебя фон уголка не совпадает с фоном блока

1) Фон я вырезал криво, тупо скриншот сделал Рашевского варианта)))

2) В каком браузере?

[Softlink]

Не, извини, но это не то, реально. Разница на лицо. На данный момент, что я вижу, это наше решение, которое не пашет в Хроме и всё. Уже появилась идея реализации, будем пробовать.

ну ты спорщик. Что не то? Фон продолжается? Да. Работает везде? Да. Блок тянется? Да. Что надо еще?

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

Твое решение ну точно не практичней:

1)я писал в этом посте о двух вариантах реализации треугольника, имея ввиду тот вариант, как ты(вы) сделал, и написал, что там подогнать фон почти нереально.

2) из п.1 следует, что пока это очень частное решение, и работает только для повторяющихся полосок

[lexxcode]

Вам так что ли надо??

Я вот не придумал, как избавится от лишнего элемента в блоке...

Алекс, блин, не много не то. Зацени, как уголок ходит http://jsfiddle.net/hML5x/3/. У вас тупо сделана подгонка под фикс, а здесь нет.

Так у тебя фон уголка не совпадает с фоном блока

1) Фон я вырезал криво, тупо скриншот сделал Рашевского варианта)))

2) В каком браузере?

2) в хроме, фон блока просто прижат к left top, так же и уголка, и при изменении размеров, оно разъезжается, оно собственно и на старте у меня не совпало

[Softlink]

Сань, да, мы одинаково сделали. У нас фон и стрелка зафиксированы. Макс близко подошел к реализации, но пока очень непрактично.

[psywalker]

Нет, Шурик, ваш вариант не спортивный и в нём нет челеннджа. Слишком всё просто. Я не меряюсь письками, а просто говорю по факту. Красивое решение было бы, если бы можно было Хром победить. Остальное херня, по факту.

Фон, кстати, я подогнал везде, кроме Хрома (в Хроме тупо не пашет вариант). У нас с Илюхой всё отлично, например.

2) в хроме, фон блока просто прижат к left top, так же и уголка, и при изменении размеров, оно разъезжается, оно собственно и на старте у меня не совпало

Я знаю, я писал выше о том, то решение для Хрома пока нет((

Сань, да, мы одинаково сделали. У нас фон и стрелка зафиксированы. Макс близко подошел к реализации, но пока очень непрактично.

В чём непрактичность?

[lexxcode]

Я глянул, твой пример в Fx, понял, чего ты добиваешься, согласен так красивей выглядит.

Жаль, что избавится от лишнего элемента не получается

[Softlink]

Фон, кстати, я подогнал везде, кроме Хрома (в Хроме тупо не пашет вариант). У нас с Илюхой всё отлично, например.

В чём непрактичность?

http://clip2net.com/s/1AJeC , http://jsfiddle.net/Softlink/hML5x/4/

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

[psywalker]

Я глянул, твой пример в Fx, понял, чего ты добиваешься, согласен так красивей выглядит.

Дело даже не в красоте, а в правильности и качестве. Я не люблю делать говно. Если удастся победить Хром, то будет здорово!

Жаль, что избавится от лишнего элемента не получается

Да, к сожалению боюсь это вынужденная мера Другого пока варианта у меня нет.

[rash]

Сегодня тоже потратил еще некоторое время, но так и не изобрел способа добиться кроссбраузерного необходимого поведения. Трансформы работают криво в вебкитах (тоже подумал о двух трансформах после того, как написал свое решение с картинкой), background-attachment все равно нужен, решение либо работает не везде, либо не годится для неоднородного фона.

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

[Softlink]

Прям тема для конкурса получилась

Макс там допилил до варианта, что можно любую картинку ставить, но Chrome портит всю картину.

[psywalker]

Вуаля!

[Lemming]

Вуаля!

Здорово! А можно описать как и почему все работает?

[psywalker]

Вуаля!

Здорово! А можно описать как и почему все работает?

Конечно! Спрашивай, что конкретно не понятно?

[rash]

То есть фишка в том, что для webkit'ов мы не полагаемся на трансформы, а просто и тупо накладываем маску?

Замечательно. А вот background-attachment: fixed все-таки нужен. Блин, идеальным было бы решение и без него. Но и так прекрасно.

[psywalker]

То есть фишка в том, что для webkit'ов мы не полагаемся на трансформы, а просто и тупо накладываем маску?

Именно! Это вынужденная мера. Сам понимаешь