css - 爬虫友好的 CSS 色带

Question

我有一个 working 'css ribbon tag'

但是，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 或类似伪选择器的东西会起作用，但我不确定如何正确实现它。

我正在寻找一种非 js 解决方案，最好能在大多数浏览器上运行良好。

Answer 1

试试这个: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
}