Стиль заголовков модулей как на фото - Вопросы по CSS

Здравствуйте. Подскажите пожалуйста как сделать шапки у модулей примерно как на фото:



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

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

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

vipiusss, спасибо, отличное решение. Размеры будут одинаковые, сделаю первым вариантом.

плохое решение
Весь блок на градиенте http://www.colorzilla.com/gradient-editor/ а уголок через псевдо элемент after позиционировать, вот его можно картинкой вырезать.
Тогда будет универсальное решение под любую ширину блока

А если картинка будет svg - вообще отлично

Всем спасибо, решения все лучше и лучше идут.

легко, если вы скинете образец картинки (без лишнего фона) и дадите ссылку на сайт, где это применяется

ну я быстро написал решение, оно было по своему правильное.
можно вообще поизвращаться, пиксельную матрицу сделать, об этом не думали?!
конечно CSS самый оптимальный вариант, и кстати beliyadm,
раз уже туда полезли, можно и с помощью CSS сделать и уголок тот(или как его назвать), зачем картинки?

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

#имя {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 50px solid #цвет;
}

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

У этого треугольника угол 45 градусов, а надо 30, а то и 25. При повороте его угол не изменится, потому вариант отпадает. К тому же весь уголок - это бордер, а необходимо ему тонкую окантовку, и box-shadow не уверен, что может прокатить.

я же писал, искажать треугольник.
сможешь, меньше слов, больше.....
ТС, пиво, и не будешь читать флуд, сделаю на CSS, срок 1 день, ТЗ на почту(или скайп)

и тему в свалку или ком раздел!

vipiusss - сможешь сделать такой уголок на стилях? С поворотом, градиентом и бордером?
Хочу увидеть рабочий пример )
Хотя правильно говорят, гемор, не стоит потраченного времени

смогу, но гемор!
на спор могу, тогда с тебя пиво, а так леньки!
ещё и тултипы добавлю, чтоб не скучно было)))

на спор могу, тогда с тебя пиво, а так леньки!

не вопрос, приезжай в гости в Севастополь )

не вопрос, приезжай в гости в Севастополь )

я в Киеве, хотя ваш город красивый!
приезжай ко мне, натравлю кота)))) он как маленькая рысь, хищный ппц!
заодно посмотришь мой сервак, может чо и подскажешь в линуксе.
***
я кандидата на велике защитил, с Николаевки,4 дня, до вас доехал, в апреле было.Через арабатку и казантип.
вёл 10 человек,3 ночовки.

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

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

я и забил, смысл выделываться, ТС на пиво даст, если не надоело тему читать и его картинки устроили, тогда сделаю и покажу!

http://jsfiddle.net/Shustry/vdkoauky/1/

У ТС на скрине уголок без градиента. Сделать градиентный на CSS не получится. Тут проще и рациональнее svg юзать.

Еще один вопрос, тема практически та же. На CSS можно ли как-то сделать волнистый бордер, вот пример, также картинка непонятно как сделано((



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

нет, волнистый нельзя

Ладно, забил, сделал картинками.

нет, волнистый нельзя

Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/

Находил такое) Меня эти php вставки пугают. Еще находил border-style: wave, не знаю откуда это но выдает ошибку в css))

Меня эти php вставки пугают.

там ничего страшного, просто повторяется подряд много раз дивы типа waves1 и других, каждый из которых представляет собой квадратик 10*10 с круглым бордером. В итоге в верхней строке будет много много дивов, ширина_блока/10пкс, вот сколько ))

Что ещё никак не родили? 
Да сделал бы как я картинкой бы уже и не парился......
Я бы давно на это забил бы.Может не грамотно, но на мобилках норм, ну и PC тем более.
Не понимаю, что вы преследуете этим разговором?: грамотность решения или итог?

Вообще банально можно поизвращаться и без css:таблицей друг над другом.
А <tr> и <td> стиле в коде задать...

ТС, да делай картинкой, норм вариант!

Ну вот есть такой велосипед http://habrahabr.ru/sandbox/52113/

Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.

Хреналион мусорных тэгов в теле тебя н смущает?

смущает конечно я ж не предлагаю это в продакшн пускать. просто разные варианты

Там же, на хабре, был вариант с вставкой • — этого символа. Но так немного не то получится.

Хреналион мусорных тэгов в теле тебя н смущает?
Если без графики, то можно волну запихнуть в шрифт и вставить псевдоэлементом.

Щас Шустрый ТСу и скрипт напишет, который попиксельно, исходя от настроения юзера, просматриваемого сайт, будет изменять шапку модульных позиций, отталкиваясь на кеш браузера и анализируя запросы в поисковых сетях и социальных аккаунтах)))

Не сдержался)))