css - css中的平滑对角线

Question

我正在尝试使用以下代码制作对角线：

<div class="diagonal_line"></div>

.diagonal_line {
  border-bottom: 50px solid #212121;
  border-left: 8px solid rgba(255, 255, 255, 0);
  display: inline-block;
}

但是这条线变得锯齿状。是否可以仅使用 css 获得更平滑的对角线？

演示：http: //jsfiddle.net/f8cpX/

更新：
- 它在 FF (22.0) 和 Safari (5.1.9) 上出现锯齿状，但在 Chrome (28.0) 上没有。
- 我正在寻找对角线形状（参见演示），而不仅仅是线条。

Answer 1

强制硬件加速：

  -webkit-transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -ms-transform: translate3d(0,0,0);
  -o-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);

小提琴 和一个不错的教程