从知乎首页用户操做入口学习到的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