Question

然而，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包装的'tags'，然后由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
}

履带式友好的CSS丝带

1 个答案: