Question

Is it possible to make these arrows with CSS and with all browser compatible including IE,6,7,8

or image is the only option?

Home > Products > Digital camera

Answer 1

I think background images are your only real pure-CSS option, since content isn’t well-supported (or supported at all) on earlier browsers.

If you’re okay with it not being a pure CSS solution, you can fake it with Javascript, but of course that violates the “using CSS only” part of your question 🙂 (and requires that your site visitors have Javascript enabled). For instance, using Prototype:

document.observe("dom:loaded", handleDividers);
function handleDividers() {
    $$('nearly any CSS3 selector').invoke('insert', {
        bottom: ">"
    });
}

…puts a > at the end of any element matching the selector. You could do the same with jQuery, Closure, … I think the quasi-equivalent jQuery would be:

$.ready(handleDividers);
function handleDividers() {
    $('nearly any CSS3 selector').append(">");
}