По старинке, без ЦСС 3, эти «стрелочки» я сверстал очень просто, за 10 минут.

Подготовил разметку:

<ul class="tags">
  <li><a href="#">раз-два</a></li>
  <li><a href="#">три</a></li>
  <li><a href="#">четыре</a></li>
  <li><a href="#">пять</a></li>
  <li><a href="#">вышел</a></li>
  <li><a href="#">зайчик</a></li>
  <li><a href="#">погулять</a></li>
</ul>

Растянул картинку за середину в Фотошопе:

Написал базовые стили (кегль взял чуть крупнее, ваши 9px — это слишком):

ul.tags {
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  *zoom: 1;
}
ul.tags li {
  list-style: none;
  float: left;
  margin: 0 10px 7px 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 22px;
  height: 22px;
  color: white;
  background-color: #006d96;
}
ul.tags a {
  position: relative;
  display: block;
  padding: 0 9px 0 7px;
  text-decoration: none;
  color: #eeeeee;
}
ul.tags a:hover {
  color: white;
}

• раз-два
• три
• четыре
• пять
• вышел
• зайчик
• погулять

Убрал тестовый background-color и декорировал элементы, скормив картинку сасс-миксину, который я использую для быстрого украшения фиксированных по высоте элементов:

ul.tags li {
  position: relative;
  @include decorate('arrow.png');
}
ul.tags a {
  /* Чтобы псевдоэлементы
     не закрыли ссылку */
  position: relative;
  z-index: 2;
}

Выделенная жёлтым строка генерирует такой ЦСС:

ul.tags li:before,
ul.tags li:after {
  content: '';
  background-image: url('arrow.png');
  background-repeat: no-repeat;
  position: absolute;
  width: 50%;
  height: 22px;
  top: 0;
}
ul.tags li:before {
  background-position: 0 0;
  left: 0;
}
ul.tags li:after {
  background-position: 100% 0;
  left: 50%;
}

Готово:

• раз-два
• три
• четыре
• пять
• вышел
• зайчик
• погулять

Как видите, два псевдоэлемента используют части одной и той же картинки. При ширине файла в 300 пикселей, максимальная ширина элемента получится около 600 пикселей.

Я предпочитаю оставлять картинку целой, не резать её, чтобы дизайнер потом мог самостоятельно поправить мелочи. Наример, такой кнопке:

добавить ободок:

Это было бы невозможно, разрежь я кнопку на tl.png, tr.png, br.png, bl.png.

Чтобы декорация сработала в ИЕ 7, не поддерживающем псевдоэлементы :before и :after, замените их реальными, указав классы при вызове миксина:

@include decorate('arrow.png', 0, 0, 0, 0, '.left', '.right');

Разметка изменится соответственно:

<ul class="tags">
  <li>
    <i class="left"></i>
    <i class="right"></i>
    <a href="#">раз-два</a>
  </li>
  <li>
    <i class="left"></i>
    <i class="right"></i>
    <a href="#">три</a>
  </li>
  <!-- ... -->
</ul>

Предлагаю уважаемым советчикам подумать, как сверстать такой элемент с помощью ЦСС 3. Примеры вёрстки удобно показывать фидлами и даблетами.