css line with slope in the middle

css, html

Solution

Use html5 canvas. Here's my fiddle example.

JS:

var canvas = document.getElementById('mycanvas');
if (canvas.getContext)
{ 
    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');

    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(10,10);
    ctx.lineTo(100,10);
    ctx.lineTo(120,30);
    ctx.lineTo(220,30);
    ctx.stroke();
} 
else 
{
    alert('Not supported');
}
​

HTML:

 <canvas id="mycanvas"></canvas>​

Problem

in CSS , how do i achieve the following: My attempt: ``` <div id="slope"></div> #slope{ width: 100px; border-top: 20px solid #000; border-right: 90px solid #fff; } ``` But then i'm stuck with how to make the thing look like a line instead of a solid I've tried raphael JS, it works but i need to incorporate this element with jQuery's animation, raphael uses SVG and doesn't seems to play well with jQuery css3/html5 is ok, as long as safari/chrome supports it then it's fine and i need to be able to modify where the slope section is placed.(Ex: move the slope section in the middle a bit to the left).

Original source