映射可点击区域

Question

有人知道如何在三角形区域内单击而不影响其他区域吗？

我试图创建一个三角形div clip-path。但是Internet Explorer不支持。

我调查了很多，但没有找到任何东西。

Answer 1

您可以将map标记与areas一起使用。许多在线工具可帮助您生成区域。其中之一是：https://www.image-map.net/

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.stack.imgur.com/Vj8iT.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Google" title="Google" href="http://www.google.com" coords="181,24,47,129,186,179" shape="poly">
    <area target="" alt="" title="" href="" coords="" shape="0">
</map>

Answer 2

这可以通过使用CSS3转换来实现

TO_CHAR()

html,
body {
  font-size: 15px;
  background-color: white;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.nav-wrapper {
  width: 26em;
  height: 26em;
  overflow: hidden;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 50%;
  margin-left: -13em;
  pointer-events: none;
  transition: all 0.3s ease;
  pointer-events: auto;
  -webkit-transform: rotate(17deg) scale(1);
          transform: rotate(17deg) scale(1);
}
.nav-wrapper li {
  position: absolute;
  width: 10em;
  height: 10em;
  border: 1px solid white;
  -webkit-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  overflow: hidden;
  left: 50%;
  top: 50%;
  margin-left: -5em;
  transition: border 0.3s ease;
}
.nav-wrapper li:first-child {
  -webkit-transform: rotate(0deg) skew(17deg);
          transform: rotate(0deg) skew(17deg);
}
.nav-wrapper li:nth-child(2) {
  -webkit-transform: rotate(72deg) skew(17deg);
          transform: rotate(72deg) skew(17deg);
}
.nav-wrapper li:nth-child(3) {
  -webkit-transform: rotate(144deg) skew(17deg);
          transform: rotate(144deg) skew(17deg);
}
.nav-wrapper li:nth-child(4) {
  -webkit-transform: rotate(216deg) skew(17deg);
          transform: rotate(216deg) skew(17deg);
}
.nav-wrapper li:nth-child(5) {
  -webkit-transform: rotate(288deg) skew(17deg);
          transform: rotate(288deg) skew(17deg);
}
.nav-wrapper li a {
  display: block;
  height: 14.5em;
  width: 14.5em;
  position: absolute;
  bottom: -7.25em;
  right: -7.25em;
  background-color: #81d8d0;
  -webkit-transform: skew(-46deg);
          transform: skew(-46deg);
  transition: opacity 0.3s, color 0.3s;
}
.nav-wrapper li a:hover {
  background-color: #a8e4df;
}