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

Question

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

Answer 1

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

.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>