Вы можете использовать треугольники CSS, как описано в CSS-хитрости . Затем примените CSS-градиент к своему фону. О, и есть небольшое border-radius, которое необходимо применить к первому (и, возможно, последнему) элементу.
К сожалению, насколько я знаю, вы не можете применить CSS-градиенты к треугольной части, так как ее фон на самом деле цвет границы.
И, конечно же, градиенты работают не во всех браузерах, поэтому вам придется использовать простой образ для более старых версий.
UPDATE:
Конечно, @BoltClock предполагает, что вы можете использовать одно изображение спрайта, сопровождаемое псевдоэлементами :before или :after.
Образец спрайт-изображения:
