Блок с разной высотой по бокам.

[davidnum]

Как сделать вот такой вот блок? Бордером не получиться, т.к. он должен растягиваться по ширине(слева - сужаться, справа - расширяться).

Edited December 3, 2013 by davidnum

[xanthonyx]

Блок фиксированный или резиновый?

[Animkim]

Можно подробнее, что за уотаквот.

А все картинки не было просто.

Edited December 3, 2013 by Animkim

[davidnum]

Блок фиксированный или резиновый?

Я же сказал, что должен растягиваться по ширине - значит резиновый.

[xanthonyx]

Оупс, не заметил)

 

Вот нашел реализации с помощью бордера:

http://codeitdown.com/pure-css-responsive-triangles/

http://jsfiddle.net/craigcannon/58dVS/17/

http://jsfiddle.net/josedvq/3HG6d/

[davidnum]

Оупс, не заметил)

 

Вот нашел реализации с помощью бордера:

http://codeitdown.com/pure-css-responsive-triangles/

http://jsfiddle.net/craigcannon/58dVS/17/

http://jsfiddle.net/josedvq/3HG6d/

Насколько я знаю, толщину бордера нельзя задать в относительных единицах. Поэтому не выйдет

[xanthonyx]

А это уже спортивный интерес) Если получится реализовать, то ссылку с результатом сюда скину.

[davidnum]

Оупс, не заметил)

 

Вот нашел реализации с помощью бордера:

http://codeitdown.com/pure-css-responsive-triangles/

http://jsfiddle.net/craigcannon/58dVS/17/

http://jsfiddle.net/josedvq/3HG6d/

Хм...я тут подумал. Если представить это блок как большой треугольник, то что может получиться. Но тогда придётся убирать горизонтальный overflow, а ширину блока делать где-то 3000px, что крайне не желательно.

Народ, может кто-то сталкивался с такой задачей?

[xanthonyx]

Грубо переработанный вышеуказанный пример:

http://jsfiddle.net/anthonydev/58dVS/62/

[davidnum]

Грубо переработанный вышеуказанный пример:

http://jsfiddle.net/anthonydev/58dVS/62/

Ого. Даже на jquery. Спасибо.

[Zverushka]

Такое можно и без скрипта сделать, вопрос в том, что эти ширина (высота) блока по краям получается ездит, то больше, то меньше, а должна быть фиксированной как я понимаю.

[Animkim]

Блин я думал тут надо именно на html+css, голову ломаю х((

[davidnum]

Блин я думал тут надо именно на html+css, голову ломаю х((

Желательно без скриптов.

[Zverushka]

Вот первый вариант в процентах 

http://jsfiddle.net/LEKP8/

(проставить нужные префиксы - пока только для хрома).

 

Второй вариант, чтобы нижний блок обрезался в пикселях - 

http://jsfiddle.net/LEKP8/1/

 

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

 

Остальные способы насколько я просекаю будут по высоте в зависимости от ширины и высоты родителя разными (тут можно применть как бордер 2000пикселей, который обрезается родителем лишнее, так и skaleY, rotate но угол поворота может давать разныую высоту, что нехорошо) - то есть то 10% внизу отсекать - то 20% - что не есть хорошо. так и контент недолго обрезать.

Edited December 3, 2013 by Zverushka

[davidnum]

Вот первый вариант в процентах 

http://jsfiddle.net/LEKP8/

(проставить нужные префиксы - пока только для хрома).

 

Второй вариант, чтобы нижний блок обрезался в пикселях - 

http://jsfiddle.net/LEKP8/1/

 

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

 

Остальные способы насколько я просекаю будут по высоте в зависимости от ширины и высоты родителя разными (тут можно применть как бордер 2000пикселей, который обрезается родителем лишнее, так и skaleY, rotate но угол поворота может давать разныую высоту, что нехорошо) - то есть то 10% внизу отсекать - то 20% - что не есть хорошо. так и контент недолго обрезать.

Первый пример больше подоходит, т.к. у блока будет абсолютное позиционирование.

Что то не хочет в мозиле работать. Префикс прописал(-moz-).

[Zverushka]

По ходу в мозилле и некоторых других браузерах надо через url с svg реализовывать...

[davidnum]

По ходу в мозилле и некоторых других браузерах надо через url с svg реализовывать...

А можно по подробнее, если не трудно?

[Zverushka]

http://jsfiddle.net/LEKP8/4/ вот так, только я фз что такое баундинг бокс) и мне кажется или сверху лишний отступ появился?

[davidnum]

http://jsfiddle.net/LEKP8/4/ вот так, только я фз что такое баундинг бокс) и мне кажется или сверху лишний отступ появился?

Нет, не кажется) Нооооо, ничего страшного! Спасибо, вам, огромное.

[Zverushka]

Но так-то лучше может через бордер или трансформы делать, если неважно, что высота одного края будет гулять в некотором диапазоне

[ryter]

а если уж на то пошло можно вед svg закодировать в base64 и беграундом или я ошибаюсь ?

[davidnum]

Но так-то лучше может через бордер или трансформы делать, если неважно, что высота одного края будет гулять в некотором диапазоне

Важно. Там ниже будет ещё один похожий блок, только теперь будет "гулять" верхний край.

Может я вам лучше в личке картинку макета покажу?

Edited December 3, 2013 by davidnum

[Zverushka]

Можно еще картинку вставить обычныю с background-size 100% и закодировать ее в base64 - будет весить 2кб. Только в 8мосле поплывет по размеру... хотя вру - с чего бы поплыло - если длина слоя 100%. В принципе top left - картинка любогоразмера будет ложиться как надо

Edited December 3, 2013 by Zverushka

[davidnum]

Можно еще картинку вставить обычныю с background-size 100% и закодировать ее в base64 - будет весить 2кб. Только в 8мосле поплывет по размеру... хотя вру - с чего бы поплыло - если длина слоя 100%. В принципе top left - картинка любогоразмера будет ложиться как надо

Идея хорошая, кстати. Только мне нужно будет создать картинку с шириной примерно 6000px.

[Zverushka]

6000 тысяч? 1920 сейчас максимальное разрешение- разве нет?

[davidnum]

6000 тысяч? 1920 сейчас максимальное разрешение- разве нет?

Это как бы бэкграунд будет, он должен растягиваться на всю ширину. Способ выше не подходит, т.к. при масштабировании получается, что блок съезжает.

P.S. У ретины 2650 по ширине.

Edited December 3, 2013 by davidnum