悬停并单击CSS三角形 [英] Hover and click on CSS triangle

问题描述

我有一个带有javascript函数的三角形，用于移动该图像。

问题是元素有一个正方形，所以点击和悬停状态触发ouside三角形（参见下图中的红色部分）：

如何防止鼠标悬停和点击三角形外部并允许点击/悬停状态只在三角形内部？

解决方案

要防止在CSS三角形外悬停和点击，您可以使用transforms 。

此技术描述如下：内触发。

  .tr {width：40％; padding-bottom：28.2842712474619％; / * = width / sqrt（2）* / position：relative; overflow：hidden;}。tr a {position：absolute; top：0; left：0; width：100％;高度：100％; background-color：rgba（0，122，199，0.7）;转化来源：0 100％; transform：rotate（45deg）; transition：background-color .3s;} / ** hover effect ** /。tr a：hover {background：rgba（255，165，0，0.7）;}  

 < div class =tr>< a href =＃>< / a> < / div>  

---

另一种方法是使用带有可点击三角形的 SVG ：

  #tr {fill：transparent; transition：fill .3s;}＃tr：hover {fill：orange;} / **演示** / html，body {height：100％; margin：0; padding：0;} body {background：url（'https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg'）center no-repeat; background-size：contains;} svg {display：block; width：30 ％; margin：0 auto;}  

 < svg viewbox = -  2 -2 104 64> < a xlink：href =＃> < polygon id =trpoints =50 0 100 60 0 60fill =transparentstroke =darkorangestroke-width =2/> < / a>< / svg>  

I have a triangle with a javascript function that moves that image.

The issue is that the element has a square shape so click and hover state are triggered ouside the triangle (see the red part in following image) :

How can I prevent hover and click outside the triangle shape and allow click/hover state only inside the triangle shape?

解决方案

To prevent hover and click outside the CSS triangle you can use transforms to make the the triangle.

This technique is described here : CSS Triangles with transform rotate

The point is to use a wrapper with hidden overflow and rotate the clickable/hoverable element so that it actualy has a triangular shape and prevent the click event or hover state outside the triangle.

Demo: Click and hover on a CSS triangle

.tr {
  width: 40%;
  padding-bottom: 28.2842712474619%; /* = width / sqrt(2) */
  position: relative;
  overflow: hidden;
}
.tr a {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 122, 199, 0.7);
  transform-origin: 0 100%;
  transform: rotate(45deg);
  transition: background-color .3s;
}
/** hover effect **/
.tr a:hover {
  background: rgba(255, 165, 0, 0.7);
}

<div class="tr"><a href="#"></a></div>

---

Another approach would be to use an SVG with a clickable triangle :

#tr{
  fill:transparent;
  transition:fill .3s;
}
#tr:hover{
  fill: orange;
}

/** for the demo **/
html,body{height:100%;margin:0; padding:0;}
body{background:url('https://farm8.staticflickr.com/7435/13629508935_62a5ddf8ec_c.jpg') center no-repeat;background-size:contain;}
svg{display:block;width:30%;margin:0 auto;}

<svg viewbox="-2 -2 104 64">
  <a xlink:href="#">
    <polygon id="tr" points="50 0 100 60 0 60" fill="transparent" stroke="darkorange" stroke-width="2"/>
  </a>
</svg>

这篇关于悬停并单击CSS三角形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！