我需要创建一个剪贴路径三角形，它的一个顶点需要固定在中心，它的形状根据光标的移动而旋转，以形成一种手电筒，但我坚持形成边长相等的三角形，并将其拉伸到屏幕的边缘。此外，当移动到屏幕顶部/底部的中间时，它的面积趋于零。下面是我的代码：

<代码><；DIV类="；容器"；>；这里有一些Lorem ipsum<；/DIV>；

<div class="container">
   some lorem ipsum here
</div>

/* css */
body{
    box-sizing: border-box;
    margin:0;
    padding:0;
    height: 100vh;
    width:100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: aliceblue;
    
}
.container{
    font-size: 2rem;
    clip-path: polygon(50% 50%,30% 100%,70% 100%);
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
}

顺晟科技：

我的数学可能有点生疏了，但像这样的东西可能对你有用：

//js
let container = document.querySelector(".container");
window.addEventListener("mousemove", (e) => {
  console.log(
    Math.round((e.pageX / window.innerWidth) * 100),
    Math.round((e.pageY / window.innerHeight) * 100)
  );

  const x = Math.round((e.pageX / window.innerWidth) * 100);
  const y = Math.round((e.pageY / window.innerHeight) * 100);
  container.style.clipPath = `polygon(50% 50%,${x}% ${y - 10}%,${x}% ${y + 10}%)`;
});

<代码>正文{框大小：border-box；保证金：0；填充：0；高度：100VH；宽度：100VW；显示：Flex；Justify-content：中心；align-items：居中；背景色：AliceBlue；}.容器{背景：RebeccaPurple；字体大小：2rem；剪贴路径：多边形（50%50%，30%100%，70%100%）；高度：100%；宽度：100%；显示：Flex；Justify-content：中心；align-items：居中；溢出：隐藏；}

<代码><；DIV类=“容器”>；这里有一些Lorem ipsum<；/DIV>；

也在JS Fiddle上。