使用CSS只使三角形具有悬停效果

Question

我陷入了困境!我想添加cursor: pointer到我的CSS,但问题是它是一个三角形.如果我使用以下内容:

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

#triangle {
  width: 0;
  height: 0;
  border-right: 50px solid transparent;
  border-left: 50px solid transparent;
  border-bottom: 50px solid blue;
  cursor: pointer;
}

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

整个三角形及其周围的一切都有"光标"的影响,我怎样才能使三角形有悬停的影响呢？

Answer 1

如果我们使用变换和构造三角形,这可以用纯CSS完成 overflow:hidden

小提琴

#triangleholder {
  width: 100px;
  height: 100px;
  border: 1px solid red;
}
#triangle {
  position: relative;
  height: 50px;
  overflow: hidden;
}
#triangle:before {
  content: '';
  position: absolute;
  width: 71px; /*using pythagorus: sqrt( (100^2) /2 ) */
  height: 71px;
  background: blue;
  transform: rotate(45deg)translateX(29%);
  cursor: pointer;
}

<div id="triangleholder">
  <div id="triangle">
  </div>
</div>

注意:代码:translateX(29%)用于在旋转后将旋转的蓝色方块放回容器的中心.即使我们改变容器的尺寸(FIDDLE),这个值似乎也是不变的