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.