简介

画一个三角形并仅点击三角形区域才会触发点击事件。
可以拆解成：

1. 画个三角形
2. 绑定点击事件（涉及点击区域）

这里提供更多更好用的方法，svg polygon绘制三角形、canvas、css clip-path:polygon( ) 裁剪可视区域，并结合 addEveentListener 实现仅点击三角形时触发事件。
当然，关于画三角形，是个老生常谈的问题，最常用的就是使用border来实现，如下：

<style type="text/css">
 #cssDiv {
     width: 100px;
     height: 100px;
     background-color: blue;
     clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
 }
 #normal {
     height: 0px;
     width: 0px;
     border-style: solid;
     border-width: 30px;
     border-color:transparent transparent blue transparent;
 }
</style>
<div id="normal"></div>

但是有一个问题，就是只是视觉上看起来像三角形，实际其他边框是透明的，仍然存在。
这样的话，点击的时候即使点击到黄色区域也是会触发事件的，于是仅仅如此是不行的。
可以考虑点击的时候去判断点击的坐标是否在三角形区域内，或者直接使用其他方案。

实现

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>

效果