映射可点击区域

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 变换来实现

 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; }

 <div class="nav-wrapper"> <ul> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> <li><a></a></li> </ul> </div>