Lista de itens contornando imagem

Já tentou fazer uma lista de itens (<ul>) contornar uma imagem? Simples. Um float:left (ou right) na própria imagem resolve de imediato.

E se os itens da lista (<li>) forem estilizados com alguma imagem de fundo, já viu o que acontece?

As setinhas não contornam a imagem e ainda ficam por trás dela.

Enquanto background você pode posicionar uma imagem em qualquer lugar de uma área com largura e altura fixas. Num exemplo mais limitado, pra não citar valores relativos (%), você pode posicioná-la ao centro, no topo, embaixo, à esquerda, à direita ou em um dos quatro cantos dessa área. São 9 posições. Porém, no caso de itens de lista, que são elementos em nível de linha, você tem apenas 3: esquerda, centro ou direita (lembrando que não estou citando valores relativos).

Por padrão, um sinalizador de item (no caso a setinha vermelha) deve estar alinhado à esquerda. E como a imagem da onda tem um float – “sai” do fluxo normal da página – o normal é que objetos “ocupem” o espaço antes preenchido pela imagem até que suas margens (da imagem e do texto) se toquem. Afinal, dois objetos, mesmo que flutuantes não podem ocupar o mesmo espaço ao mesmo tempo. Por isso o texto contorna a imagem e a setinha (que é uma imagem de fundo), não.

O que fazer? A menos que você possa abrir mão de usar imagens estilizadas para seus itens de lista, uma solução que encontrei foi aplicar display, float e margem à lista, além de um clear ao primeiro elemento após a lista. O resultado é bastante satisfatório pra mim e você confere na página de exemplo que criei para este “problema”.

Conhece alguma outra solução? Sugestões que não sejam adicionar marcações extras ao código HTML são bem-vindas. Comente!