Creating a skewed triangle shape

Question

Is it possible to create the shape produced by this Fiddle. But then with no JavaScript but CSS3 (with <div>) ?

Basically this:

for(var i = 0; i < coords.length; i += 1) {
    if(coords[(i + 1)] != undefined) {
        ctx.beginPath();
        ctx.moveTo(coords[i].x, coords[i].y);
        ctx.lineTo(coords[(i + 1)].x, coords[(i + 1)].y);
        ctx.stroke();
    } else {
        ctx.beginPath();
        ctx.moveTo(coords[i].x, coords[i].y);
        ctx.lineTo(coords[0].x, coords[0].y);
        ctx.stroke();
    }
}

So you have points that needs to connect to each other?

Answer 1

Use svg, if you don't want to use canvas.

<svg width="100" height="100">
  <path d="M0 0 l100 10 l-40 90z" fill="none" stroke="black" stroke-width="2" />
</svg>

---

Path command for 8,8,10,10,30,30,49,10 would be M8 8 L10 10 L30 40 L49 10z.

<svg width="49" height="40" viewBox="0 0 50 41">
  <path d="M8 8 L10 10 L30 40 L49 10z" fill="none" stroke="black" stroke-width="2" />
</svg>

---

To apply a click event to the shape, you could use pointer-events: all on #test.

#test {
  pointer-events: all;
}

<svg width="49" height="40" viewBox="0 0 50 41">
  <path id="test" d="M8 8 L10 10 L30 40 L49 10z" fill="none" onclick="alert('Works')" stroke="black" stroke-width="2" />
</svg>