通过css/javascript实现对角线图像覆盖

我想创建一个div覆盖，设置为5%不透明度，这将在图像中的第一行文本周围创建一个对角线边界框。在我看来，如果我有四个角的x，y坐标，我应该能够创建覆盖，但我无法找出正确的语法来标记div。我认为这可以做到，是不是错了，如果不是，有人能告诉我一些这样做的方法吗

---

对于简单的情况，您可以使用css divs的

transform

属性，而不是使用

canvas

和javascript。例如

#diag {
    background-color: rgba(255, 0, 255, 0.25);
    width: 700px;
    height: 60px;
    position: absolute;
    left: 100px;
    top: 160px;
    transform: rotate(2deg) skew(30deg)
}

您可以在图像中文本的第一行获得一个div，该div可以使用CSS轻松设置边框样式，并且可以直接用于事件（悬停、单击）

如果您需要指定4个角点，但是通常仅一个变换是不够的，您必须在放置在图像上的画布中绘制覆盖。这是因为画布在默认情况下是透明的，只有您显式绘制的内容才可见，而图像在其他区域中保持不变。例如，使用：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = canvas.offsetWidth;
canvas.height = canvas.offsetHeight;
ctx.beginPath();
ctx.moveTo(166, 282);
ctx.lineTo(855, 296);
ctx.lineTo(897, 351);
ctx.lineTo(212, 349);
ctx.closePath();
ctx.fillStyle = "rgba(0, 255, 0, 0.25)";
ctx.strokeStyle = "#0F0";
ctx.lineWidth = 4;
ctx.fill();
ctx.stroke();

我用绿色突出显示了第三行（fill命令），还添加了一个边框（stroke命令）

---

这解决了我所要求的问题，但现在我正在考虑它，它并没有解决我的实际问题。我将对这个答案投赞成票，并用我所有的参数重新提问。@medievalmatt:变形div以便可以指定所有4个角点，这在HTML中是不可能的，因为转换只是一个矩阵。要绘制一般多边形，需要使用

画布

。我将扩展这个问题的答案。