Как создать стрелку «больше чем», используя только CSS?

Question

Возможно ли сделать эти стрелки с CSS и со всеми браузерами, совместимыми с IE, 6,7,8

или изображение является единственным вариантом?

Домой> Продукты> Цифровая камера

Answer 1

Я думаю, что фоновые изображения - ваш единственный настоящий чистый CSS-вариант, поскольку content не поддерживается (или поддерживается вообще) в более ранних браузерах.

Если вы согласны с тем, что это не просто решение CSS, вы можете подделать его с помощью Javascript, но, конечно, это нарушает часть вашего вопроса с использованием «только CSS» :-) (и требует, чтобы посетители вашего сайта Javascript включен). Например, используя Prototype :

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

... помещает > в конец любого элемента, соответствующего селектору. Вы можете сделать то же самое с jQuery , Closure , ... I думаю квазиэквивалентный jQuery будет:

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

Answer 2

Я наткнулся на этот пост, ища решение для той же проблемы. Я нашел чистое CSS-решение и решил поделиться им на случай, если кто-то тоже столкнется с этим.

Я использую это для хлебных крошек для веб-сайта. В настоящее время у нас есть пролеты с

    .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>

Пример довольно грубый. Я скопировал некоторый код, в котором при работе здесь не работает точно так, как задумано, поскольку текст смещен, но он иллюстрирует, как создать знак «больше чем».

Код был создан на основе http://cssarrowplease.com/ и немного изменен.