Question

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

Answer 1

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>​