Question

我想在屏幕上对角画一个三角形，该三角形在悬停时会改变颜色。我目前的尝试并不是将鼠标悬停在三角形上，而是将“ hack三角形”实际上是一个矩形，并不关心透明部分。

仅当实际上在三角形本身上悬停时，如何才能使它悬停？

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>

绘制可悬停的三角形

1 个答案: