從知乎首頁用戶操做入口學習到的CSS技巧 - 合理利用僞元素實現一些裝飾樣式

最近在模仿作一個靜態的PC版知乎，在模仿的過程當中，從知乎工程師的方法中學到了很多知識，好比CSS方面的，如下介紹一個今天學到的僞元素的技巧。

示例

DOM結構爲：

<div class="home-entry-box relative clearfix">
  <span class="home-entry-box-arrow"></span>
  <ul class="pull-left">
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-question-off"></i>
        <span>提問</span>
      </a>
    </li>
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-answer-off"></i>
        <span>回答</span>
      </a>
    </li>
    <li class="home-entry-item inline-block relative">
      <a>
        <i class="sprite-home-icon-post-off"></i>
        <span>寫文章</span>
      </a>
    </li>
  </ul>
  <a class="pull-right"><span class="draft">草稿</span></a>
</div>

在這個示例中，標註了兩處，第一處是一個裝飾之類的東西，這個裝飾讓整個用戶操做導航條好看了很多；第二處是項與項之間的分隔裝飾。（爲了命名方便，後文中第一處叫作對話修飾，第二處叫作分隔修飾）

實現

分隔修飾: 因爲分隔修飾比對話修飾更簡單一些，因此先說下分隔修飾的實現。通常狀況下，我會想到用border-right去實現這個效果，但這有個問題，效果中這個修飾的高度既不是每一項的高度，也不是每一項的內容的高度，所以用border是不太好處理的，而且也不太方便定位的控制。在這裏，可使用僞元素，將每一項(li.home-entry-item)設置爲position: relative，以後每一項加一個僞元素，決定定位來實現分隔修飾的效果，代碼爲：

.home-entry-item:after {
  content: '';
  position: absolute;
  width: 1px;
  height: 20px;
  left: 0;
  top: 50%;
  margin-top: -10px;
  background: #f0f0f0;
}

這樣，既實現了高度的控制，又實現了定位的控制。

對話修飾: 這是一個直角三角形，剛開始看到的時候，我覺得是一個圖片作的小圖標，後來審查了一下，發現是巧妙地利用了僞元素作出來的。學習了CSS的同窗應該都接觸過一個經典例子吧，就是畫三角形，思路是將一個元素寬高都設置爲0，以後控制三個方向的border爲透明，再控制最後一個方向的border便可。另外還能夠經過控制不一樣方向border的寬度來實現不一樣形狀的三角形。

這裏咱們就能夠利用僞元素來畫這個三角形，不過仔細看的話，會發現示例中的三角形仍是一個有邊框的三角形，這也是我一開始覺得是圖片作的圖標的緣由。後來看了一下知乎的工程師的處理方式，發現本身CSS的使用和創造力還有不少要學習的地方。解決辦法是：每一個元素正好有兩個僞元素，只要再利用一個僞元素畫一個三角形，再把兩個僞元素畫的三角形疊加起來就能夠了。其中一個三角形要比另外一個小1px的寬高。

示例中的完成方案是經過僞元素畫兩個等邊三角形，其中一個比另外一個的border-width小1px，而且垂直距離多偏移1px，水平距離多偏移2px(這樣才能讓大的三角形包住小的三角形，造成相似邊框的效果)，以後設置span.home-entry-box-arrow爲overflow: hidden; 截去三角形多餘的部分，造成直角三角形，這樣比直接畫直角三角形更省事。代碼以下：

.home-entry-box-arrow {
  position: absolute;
  top: 10px;
  left: -10px;
  width: 10px;
  height: 10px;
  overflow: hidden;
}
.home-entry-box-arrow:before,
.home-entry-box-arrow:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border: solid transparent;
}
.home-entry-box-arrow:before {
  border-top-color: #f0f0f0;
  border-width: 14px;
  top: 0;
  left: 0;
}
.home-entry-box-arrow:after {
  border-top-color: #fafafa;
  border-width: 13px;
  top: 1px;
  left: 2px;
}

總結

利用僞元素，能夠實現不少裝飾效果，善於利用能夠寫出更好的CSS以及免去沒必要要的表現型的HTML