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

Question

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

Answer 1

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

Answer 2

我会使用 Adobe Illustrator 来 draw/create 您想要的 section/s 作为背景。然后将其保存在 SVG 文件中。

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

例子？

这是我家www.triiio.it

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

Best way to create interactive non-rectangular HTML elements

html

javascript

css

jquery

justinmind