0

I'm trying to make a diagonal line with the following code:

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

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

But the line gets jagged. Is it possible to have a smoother diagonal line with only css?

Demo: http://jsfiddle.net/f8cpX/

UPDATE:
- It appears jagged on FF (22.0) and Safari (5.1.9), but not on Chrome (28.0).
- I'm looking for diagonal shape (see the demo), not only the line.

Fellow Stranger
  • 32,129
  • 35
  • 168
  • 232
  • I think that's OS-relevant, on my Mac it looks great but I know on a Windows machine they do smoothing not as good, especially for fonts and CSS borders – casraf Jul 08 '13 at 09:07
  • I definitely see anti-aliasing here on my Win7 in FF but it's not perfect. And yes, all this rendering of antialiased shapes (even fonts) look quite different in different browsers and OSes. – keaukraine Jul 08 '13 at 09:10
  • See update. Preferably cross-browser, only "modern" browsers of interest. – Fellow Stranger Jul 08 '13 at 09:27

1 Answers1

1

Force hardware accelration:

  -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 and a nice tutorial

raam86
  • 6,785
  • 2
  • 31
  • 46