最近遇到的比较有意思的需求，也是网上搜来的做法，在这里分享一下。热豆腐在这->Demo。

先画好两个div，高度都为100px，第一个固定宽度200px，第二个宽度可变。

<div class="square meh-diagonal" style="width:200px">
  fixed width
</div>
<div class="square nice-diagonal" style="width:50%">
  flexiable width
</div>

.square {
  height: 100px;
  border: 1px solid #aaa;
  padding: 10px;
  margin: 10px;
  position: relative;
}

其中设置relative定位是因为后面伪元素必须设置absolute定位。

meh

利用transform: rotate()。这是比较常见的CSS属性，大多数人能想到的也就是这个了。

.meh-diagonal:after {
  content: "";
  border-top: 1px solid red;
  width: 221px;
  position: absolute;
  left: 0;
  top: 0;
  transform: rotate(26deg);
  transform-origin: top left;
}

221px和26度都是手动算出来个大概值然后再一点点调的。

这个方法缺点在于不能自适应div元素的大小，长度和旋转角度都需要手动设置。

nice

利用linear-gradient函数。

搜到这个方法的时候，让我有一种中学做数学竞赛题的感觉：

一道死活想不出来的怎么做的题目，去请教老师，老师懒得看你一眼，扔下一句话：翻开课本一百八十九页，把定理三抄五十遍！然后你才发现这条定理原来还可以这么用。

我觉得发散思维好的人多半能把CSS魔法搞掂。

回到正题。

.nice-diagonal:after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    red,
    transparent calc(50% + 1px)
  );
}

前一种做法是真的在div内画了一条线，不过是一个高度为0的矩形的上边框（border-top）。而这个做法其实是在div内填充了一个从左下角到右上角的线性渐变，只是这个渐变比较特殊，除了中间2像素宽度着了红色其余地方都是透明，这样看起来就是div有了一条连接左上角和右下角的对角线。

克服了前一种做法的不能自适应的缺点，你值得拥有～

浏览器兼容性方面，transform – IE9及以上；linear-gradient – IE10及以上；calc – IE9及以上。

另外Safari浏览器好像对transparent这一值支持不太好，会把该值一律认为是“透明黑”，所以像简单的红色渐变到transparent在Safari上都会变成“红-黑-透明”。解决方法是把transparent替换成红色对应的透明值rgba(255,0,0,0)。

参考

linear-gradient

Safari兼容性问题（英文）