履帶友好的CSS絲帶

不過，HTML是非常難看：

  <div class="tag-holder"> 
       <div style="position:relative"> 
       <div class="triangle">  
        <span>classic</span> 
       </div> 
       </div> 
       <div style="position:relative"> 
       <div class="triangle">  
        <span>open-assets</span> 
       </div> 
       </div> 
       <div style="position:relative"> 
       <div class="triangle">  
        <span>open-music</span> 
       </div> 
       </div> 
      </div> 
     </div>

在

我要定義由兩個div，然後由一個包裹裹着的「標籤」 tag-holder div。對於爬蟲/屏幕閱讀器來說，這是非常棘手的問題，因爲它們很難閱讀。

我可以使用什麼樣的CSS，以便使用最少的HTML標記，但仍能產生相同的外觀？我正在考慮使用:before或某些此類psuedoselector會起作用，但我不確定如何正確實施它。

我正在尋找非js解決方案，並且最好在大多數瀏覽器上運行良好。

來源

2014-06-27 Secret

你說的意思是什麼「難讀」 –

@ Mr.Alien他們」很難閱讀屏幕閱讀器（盲人），他們無法訪問。特別有問題，因爲這是博客文章標籤。 – Secret

像這樣在http://jsfiddle.net/k87CE/4/ –

試試這個：http://jsfiddle.net/t5YMA/

HTML：

<div class="tag_holder"> 
    <div class="ribbon">classic</div> 
    <div class="ribbon">open-assets</div> 
    <div class="ribbon">classic</div> 
</div>

CSS：

.ribbon { 
    position:relative; 
    width: 80px; 
    height: 30px; 
    background-color: #5ad2f0; 
    text-align: left; 
    border-radius: 5px 0px 0px 5px; 
    margin:5px 0; 
    color:white; 
    font-weight:bold; 
    font-size:12px; 
    padding-left: 20px; 
} 
.ribbon:after { 
    content: ""; 
    position: absolute; 
    left: 100%; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-left: 16px solid #5ad2f0; 
} 
.ribbon:before { 
    content: ""; 
    position: absolute; 
    bottom: -14px; 
    left:1px; 
    display: inline-block; 
    width: 0; 
    height: 0; 
    border-top: 15px solid transparent; 
    border-bottom: 15px solid transparent; 
    border-right: 16px solid #3aacc9; 
    z-index:-1 
}

來源

2014-06-27 15:45:32 Muamar

履帶友好的CSS絲帶

回答

相關問題