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);

fiddle 和一个不错的tutorial

css中的平滑对角线

1 个答案: