Question

是否可以使用CSS制作这些箭头并且所有浏览器兼容，包括IE，6,7,8

或图片是唯一的选择吗？

主页＆gt;产品＆gt;数码相机

Answer 1

我认为背景图片是您唯一真正的纯CSS选项，因为content在早期浏览器上不受支持（或完全支持）。

如果你没有使用纯粹的CSS解决方案，你可以使用Javascript来伪造它，但当然这违反了你的问题的“仅使用CSS”部分:-)（并要求你的网站访问者拥有已启用Javascript）。例如，使用Prototype：

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

...将>放在与选择器匹配的任何元素的末尾。您可以使用jQuery，Closure执行相同操作，... 认为准等效jQuery将是：

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

Answer 2

我在搜索同一问题的解决方案时偶然发现了这篇文章。我找到了一个纯粹的CSS解决方案，并且想到我会分享它，以防有人遇到这个问题。

我将此用于网站的面包屑。目前我们已经跨越了

＆＃13;

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

＆＃13;

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

＆＃13;

示例非常粗糙。我已经复制了一些代码，这些代码在这里运行时并没有完全按照预期工作，因为文本被取代了，但它说明了如何创建＆＃34;大于＆＃34;标志。

代码是基于http://cssarrowplease.com/创建的，只是稍加修改。

如何仅使用CSS创建“大于”箭头？

2 个答案: