Ребята, нужна помощь

Господа верстальщики, как можно и можно ли сверстать активный пункт меню средствами CSS?

Как-то не видно активного пункта меню на картинке. Или его надо самому придумать?

Vlad03, откройте картинку.

Аааа, а по одному месту дизайнеру дать нельзя?

Цитата (jedybeavis):

можно ли сверстать активный пункт меню средствами CSS

Можно. 

Vlad03, это скриншот. Вот и вопрос можно ли сверстать 
Если кто видел пример можно сылочку, я дальше попробую разобраться

Вот это поможет? 

h3:before {

content: '';
border-left: 8px solid #f7dc6f;
display: block;
height: 0;
float: left;
width: 0;
margin: 0 0 0 -16px;
border-top: 13px solid transparent;
border-bottom: 13px solid transparent;
}

на уголке градиента нет. У прямоугольника делать стандартными средствами. 
на уголке градиента нет. У прямоугольника делать стандартными средствами. 

floppox, а с градиентом как?

Да, уголок получилось. Но градиент и тень у уголка не получается.

Уголок конечно хорошо, но пункты меню разной длинны, а уголок будет одним видом. 
jedybeavis, зачем так изгаляться, не проще картинку внизу вставить?

А можете и вовсе картинку вырезать целиком и растягивать фоном в li теге, она много не будет весить и отпадет необходимость в дополнительном блоке p

lufter, тогда прийдется для каждого элемента вырезать картинку свою. Так как уголок у каждого пункта разный.
Всем огромное спасибо за помощь и консультацию. Я думал что может можно сделать средствами CSS.

не придется. просто картинку тянуть на всю ширину. вам же посилання написал два варианта. с width:100% и и background-size

jedybeavis, не нужно под каждый пункт, пункты разные по длине не извнстной заведомо, делаете одну картинку и растягиваете свойством backgroun-size. или 100% или background-size:cover; это свойство в css3 но сейчас кажется уже нет таких браузеров что не поддерживают это свойстово, а есди есть то это меньше 1% таких консерваторов кто до сих пор пользуются всякими там эксплорерами 6-8 можно послать

jedybeavis, Быстро же вы сдались, картинку, картинку...
Вот вам примет того, что CSS - всесилен:

Xazzzi, а где же тень?

Xazzzi, уголок ребрами пошол. каринка весить будет 1-2 килобайта, это мелочь, css весит (на хорошем сайте) 10-30 Кб. картинка верное решение
FLAKE_MDM, box-shadow не прописан, не факт что он на углах сработает

FLAKE_MDM, во-первых, я ж не исполнитель проекта. Был разговор о стрелке с градиентом, я показал, что можно.
А во-вторых - гляньте ссылку, добавил тень и трюк чтобы стрелка была чуть более гладкой.
lufter, весь css блока с тенями - 730 знаков(читай - байт). С учётом того, что этим же цсс позиционируется и задается размер-фон основному блоку.
В любьом возможном случае, это меньше чем любая картинка, и быстрее, т.к. стили обычно идут одним файлом, тоесть не нужно делат доп запрос на сервер за картинкой.
Кстати, вспомнил ещё один хороший метод сделать блок произвольной формы, заключается в использовании inline-svg, много примеров есть на css-tricks.com

Xazzzi, 2 кб + не порешают картину в весе, а картинка одинаково отобразится любыми бразерами. цсс3 не так плотно вошол в интернет. эти извращения никчему, есть гарантированный набор свойств цсс. вот в цсс более сотни свойств, чтоб заверстать качественную кроусбраузерную страничку я использую до 30 свойств
ито малость, набор, с которым мона любую страницу с любым дизом заверстать
width
height
margin
padding
font-size
font-family
font-weight
display
float
bacground
border
border-radius
box-shadow
line-height
position
color
z-index
text-align
top
left
right
bottom