如何使用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 ......我认为准相当于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/创建的，只是稍作修改。