How to create 'greater than' arrow using CSS only?

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 stumbled across this post while searching for a solution for the same issue. I found a pure CSS solution, and figured I would share it in case someone came across this as well.

I'm using this for breadcrumbs for a website. Currently we have spans with

    .breadcrumbs {

      overflow: hidden;

      background-color: #fcfafa;

      padding: 9px 15px;

      overflow: hidden;

      height: 32px

    }

    ul {

      list-style: none;

    }

    .breadcrumbs li {

      float: left;

    }

    .breadcrumbs a {

      float: left;

    }

    .breadcrumbs span {

      position: relative;

    }

    .breadcrumbs span {

      float: left;

      padding: 0 18px;

    }

    .breadcrumbs span:after,

    .breadcrumbs span:before {

      left: -0%;

      top: 50%;

      border: solid transparent;

      content: " ";

      height: 0;

      width: 0;

      position: absolute;

      pointer-events: none;

    }

    .breadcrumbs span:after {

      border-left-color: #fcfafa;

      border-width: 30px;

      margin-top: -30px;

    }

    .breadcrumbs span:before {

      border-color: rgba(194, 225, 245, 0);

      border-left-color: #f39200;

      border-width: 34px;

      margin-top: -34px;

    }

<div class="breadcrumbs">
  <ul>
    <li>
      <a>Frontpage</a>
      <span></span>
    </li>
    <li>
      <a>Category 1</a>
      <span></span>
    </li>
    <li>Category 2</li>
  </ul>
</div>

Example is quite crude. I've copied some code in which doesnt work exactly as intended when running here, as the text is displaced, but it illustrates how to create the "greater than" sign.

Code was created base on http://cssarrowplease.com/ and just slightly modified.

Answer 2

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(">");
}