创建倾斜的三角形

Question

是否有可能创造出这个小提琴制作的形状.但是没有JavaScript但CSS3(带<div>)？

基本上这个:

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();
    }
}

所以你有点需要相互连接？

Answer 1

svg如果您不想使用,请使用canvas.

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

路径命令8,8,10,10,30,30,49,10是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>

要将click事件应用于形状,您可以使用pointer-events: allon #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>