javascript - 创建交互式非矩形 HTML 元素的最佳方式

Question

我想为我的一个 HTML 页面创建一个背景，就像图片中显示的那样，当用户将鼠标悬停在其中一个三角形部分上时，该特定部分的不透明度会发生变化。最好的方法是什么？

Answer 1

我会使用 Adob​​e Illustrator 来绘制/创建您想要作为背景的部分。然后将其保存在 SVG 文件中。

使用浏览器打开 SVG 文件并复制 HTML 文件中的所有标签。然后使用 JS、Jquery、库来做你想做的事。

例子？

这是我的家www.triiio.it

Answer 2

在 SVG 中，您可以使用多边形元素在正方形内创建三角形，并且每个多边形都可以单独悬停。

.square {
  height: 400px;
  width: 400px;
  overflow: hidden;
}
svg {
  height: 100%;
  width: 100%;
}
polygon {
  fill: aliceblue;
  stroke: crimson;
  stroke-linejoin: round;
}
polygon:hover {
  fill: cornflowerblue;
}

<div class='square'>
  <svg viewBox='0 0 100 100'>
    <a xlink:href='http://google.com'>
      <polygon points='5,5 50,50 95,5' />
    </a>
    <polygon points='5,5 50,50 5,95' />
    <polygon points='5,95 50,50 95,95' />
    <polygon points='95,5 50,50 95,95' />
  </svg>
</div>