На самом деле диагональные линии возможны в CSS (вопреки ответу @ FlashFan).
Два способа приходят на ум:
Существует хорошо известный хак с использованием границ, который позволяет рисовать неправильные фигуры, в том числе диагональные линии.
Здесь вы найдете хорошую запись: http://www.infimum.dk/HTML/slantinfo.html
Насколько я знаю, эта техника работает во всех современных браузерах. Обратной стороной является то, что вам может понадобиться несколько <div> элементов для создания одной фигуры.
Просто создайте узкую рамку с заливкой цвета фона и используйте функцию CSS3 transform: rotate();.
Этот метод работает только с браузерами, которые позволяют вращать элементы. К счастью, вы можете вращать элементы во всех браузерах, включая IE. Однако CSS для него может быть довольно грязным, так как большинству современных браузеров требуется префикс поставщика для CSS, а в IE есть свой совершенно другой метод ротации.
Хорошая новость заключается в том, что оба эти метода являются чистым HTML / CSS, они оба работают во всех браузерах, и ни один из них не требует использования JavaScript или современных технологий HTML5.
Но их обоих можно считать чем-то вроде взлома. Если вы согласны с использованием Javascript, я бы посоветовал заглянуть в библиотеку Raphael , которая снова работает во всех текущих браузерах.
Если вы в порядке с блокировкой пользователей IE, вы также можете использовать элемент HTML5 <canvas> и просто нарисовать линию, или SVG, если вы предпочитаете векторную графику.