如何使用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/創建的，只是稍作修改。