面试官：前端用任意方式绘制一个三角形，添加一个点击事件，仅点击三角形内部才能触发

本文链接：https://blog.csdn.net/2401_86113453/article/details/142379048

前言

面试官：用任意方式绘制一个三角形，添加一个点击事件，仅点击三角形内部才能触发
听到前半段心想: 古老八股文
听到后半段: 似乎跟我想的不太对？

说到绘制一个三角形，可能不少人大脑里能直接蹦出来个答案，用css的border绘制，简单又方便，但众所周知，点击一个元素的content+padding+border的区域都会触发js的点击事件，面试官说完后面一句话就等于在说：小样，不准用css

解决方案

哈哈，本人是个菜鸟，css写的不够多，平时也还真没注意到这个问题，一下有点没反应过来，面试完之后就学习了一下，总结出有以下两种方案。大伙如果有其他更简单的方案也可以一起讨论，让我这个菜鸡多学习学习。

方案一: 用svg的标签绘制三角形

<polygon> 是 SVG（Scalable Vector Graphics，可缩放矢量图形）中的一个标签，用于绘制多边形。通过定义一系列的点来连接这些点，形成闭合的形状，比如三角形、矩形、五边形等。

<polygon> 的主要属性

points：用于指定多边形的顶点坐标，按照 "x,y" 的格式排列，每两个数值表示一个点。多个点之间用空格或逗号分隔。

示例：绘制一个三角形

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

在上面的例子中，<polygon> 标签绘制了一个三角形：

points="50,0 100,100 0,100" 定义了三角形的三个顶点坐标，分别是 (50,0)、(100,100) 和 (0,100)。
fill="blue" 设置了三角形的填充颜色为蓝色。

方案二: 使用 CSS `clip-path` 属性

clip-path属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。这里全部的可选属性值参考mdn的说明，这里我说一下polygon，连命名都和上面svg的一样，使用方式自然也是一样(笑)，polygon() 函数也是传入一系列点的坐标，连在一起后形成一个闭合的图像，再通过background-color添加颜色，三角形就出来啦

示例：

<div class="triangle-clip"></div>
<style>
  .triangle-clip {
    width: 100px;
    height: 100px;
    background-color: blue;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
</style>

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <style>
    .triangle-container {
      width: 200px;
      height: 200px;
    }
    .triangle2 {
      width: 200px;
      height: 200px;
      background-color: blue;
      clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }
  </style>
  <body>
    <div class="triangle-container">
      <svg viewBox="0 0 100 100">
        <polygon points="50,0 100,100 0,100" fill="red" id="triangle1" />
      </svg>
    </div>
    <div class="triangle-container triangle2"></div>
    <script>
      // 监听三角形点击事件
      document.getElementById('triangle1').addEventListener('click', function () {
        alert('Triangle clicked!')
      })
      document.querySelector('.triangle2').addEventListener('click', function () {
        alert('Triangle clicked!')
      })
    </script>
  </body>
</html>