Маска стрелки

[Zverushka]

http://jsfiddle.net/Zverushka/FxGXC/2/

Можно ли сделать подобное через маску (с применением в том числе свг для кроссбраузерности), но чтобы так - чтобы по сути мы вырезали только низ - чтобы слой обрезался так - чтобы была лишь стрелочка внизу и все - а по ширине и высоте могли быть любые размеры? Потому как сейчас для маски используется фиксированных размеров квадрат - не бесконечный по ширине и высоте (и если блок будет больше высоты и ширины маски - он просто обрежется и все ...

Edited January 13, 2014 by Zverushka

[klierik]

как вариант:

если эта "стрелочка" есть в векторе, то можно использовать http://icomoon.io/app/#/select
размером стрелочки можно будет упровлять через fz: (увеличение пропорциональное)

[Zverushka]

Мм не поняла, что там по ссылке.

Ищу подобное решение для слоев, у которых фон неоднородный и неизвестной высоты - что нельзя просто вырезать одну стрелку и прикрепить ее через :after (фон тогда будет не совпадать), нужно чтобы именно слой динамической ширины и высоты имел в конце стрелку, заполненную тем же задним фоном, что и сам слой...

[klierik]

ах вот оно как...

интереснок как ты себе такое представляешь?

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

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

[npofopr]

Проще доп. класс добавлять. 

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

Ждем вашего скрипта) 

Буквально вчера делал треугольнички, и не стал пока заморачиваться. И сделал через простой :after

 

Хотя проблема у меня одна висит, не совсем как у вас, но похожая, просто с другого конца:

Хотя может я тут туплю и это быстро решается. Но пока не буду создавать отдельную тему)

[Zverushka]

ет я тут туплю

Верхнюю границу не делать и вставить границу псевдослоем.

@klierik,

Слуш, ничего не поняла - ты об этом? http://jsfiddle.net/Zverushka/FxGXC/3/

Градиент то ладно - но если там фото? вот тогда проблемы... 

[SelenIT]

Фон снаружи блока, к которому примыкает блок с хитрым фоном и стрелкой, ведь сплошной? Почему бы тогда просто не накрыть часть хитрого фона парой сплошных псевдиков, по аналогии с примером http://jsfiddle.net/JaMH9/2/ ?

[Zverushka]

парой спло

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