绘制可悬停的三角形

Question

我想在屏幕上沿对角线绘制一个三角形，它会在悬停时改变颜色。我目前的尝试并没有真正悬停在三角形上，而是一个“黑客三角形”，它实际上是一个矩形并且不关心透明部分。

我怎么可能只在实际悬停在三角形本身上时才使它可以悬停？

body {
  padding: 0;
  margin: 0;
}

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100vh 0 0 100vw;
  border-color: transparent transparent transparent #007bff;
}

.triangle:hover {
  border-color: transparent transparent transparent red;
}

<div class="triangle"></div>

重复的线程建议了一个相当简单的三角形的答案，不像我的情况，它占据了屏幕的整个宽度和高度并且每一边都不相同。

Answer 1

你可以使用clip-path

body {
  margin: 0;
}

.triangle {
  width: 100vw;
  height: 100vh;
  background:#007bff;
  -webkit-clip-path:polygon(0 0,0 100%, 100% 100%);
  clip-path:polygon(0 0,0 100%, 100% 100%);
}

.triangle:hover {
  background:red;
}

<div class="triangle"></div>

为了获得更好的支持，我会考虑倾斜转换，但由于这应该是响应式的，因此您需要一些 JS 来调整窗口调整大小时的倾斜角度：

var w = window.innerWidth;
var h = window.innerHeight;
document.querySelector('.triangle').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";

window.onresize = function(event) {
    w = window.innerWidth;
    h = window.innerHeight;
    document.querySelector('.triangle').style.transform="skewY("+(Math.atan(h/w)*180/Math.PI )+"deg)";
};

body {
  margin: 0;
  overflow:hidden;
}

.triangle {
  width: 100vw;
  height: 100vh;
  background:#007bff;
  transform-origin:top left;
  transform:skewY(20deg);
}

.triangle:hover {
  background:red;
}

<div class="triangle"></div>