1、svg解法

使用 svg 的 polygon 绘制三角形，并在 polygon 上绑定事件。

<svg width="100" height="100">
   <!-- 定义三角形的三个顶点 -->
    <polygon id="polygon" points="50,0 100,100 0,100" fill="blue" />
</svg>

const polygon = document.getElementById('polygon');
// 为三角形添加点击事件处理程序
polygon.addEventListener('click', function () {
    alert('polygon clicked!');
});

2、canvas解法

使用 canvas 的 api 连线、填充，给canvas整体绑定事件，点击时进行坐标判断。

<canvas id="canvas"></canvas>

const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d');
// 绘制三角形
function drawTriangle(ctx, x1, y1, x2, y2, x3, y3) {
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx.closePath();
    ctx.fill();
}
drawTriangle(ctx, 20, 0, 40, 40, 0, 40);
canvas.addEventListener('click', function (e) {
    var x = e.offsetX, y = e.offsetY; // 点击位置判断
    if (ctx.isPointInPath(x, y)) {
        alert('canvas clicked!');
    }
});

3、css3 clip-path解法

利用 css3 的新特性 clip-path 裁剪可视区域实现三角形，然后直接绑定事件。

<div id="cssDiv"></div>
<style type="text/css">
#cssDiv {
    width: 100px;
    height: 100px;
    background-color: blue;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
</style>
<script>
const cssDiv = document.getElementById('cssDiv');
cssDiv.addEventListener('click', function () {
    alert('cssDiv clicked!');
});
</script>