css - 2 つの境界線の間に滑らかな角度の線を作成します

Question

2 つの境界線の間に角度を作成しようとすると、ギザギザの (ピクセル化された) 線が表示されます。

次のコードを検討してください。

  <div id="example"></div>

   #example:before{
    content: "";
    position: relative;
    width: 0;
    height: 0;
    left: 0;
    bottom: -40px;
    border-top: 20px solid black;
    border-left: 470px solid red;
}

ここにフィドルがあります：http://jsfiddle.net/pan1cmode/bQYU7/2/

スムーズにする方法について何か提案はありますか？