使用 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>

整个三角形和它周围的一切都有"Cursor"影响，我怎样才能只让三角形有悬停影响？

Answer 1

使用 SVG 或 CSS3 绘制箭头。给那个元素 cursor: pointer 给 div 包装非光标

实现这个的相关文章：http://www.smashingmagazine.com/2014/11/03/styling-and-animating-svgs-with-css/

Answer 2

您可以使用伪元素遮盖非三角形区域，并在其上设置 cursor: default。您需要将 overflow: hidden 添加到包装元素以包含遮罩，当然它依赖于背景是纯色并且您要遮罩的形状是完美的三角形。不可大规模扩展且有点老套，但它会得到您想要的特定结果。

#triangleholder {
  // ..
  overflow: hidden;
}

#triangle {
  // ..
  position: relative;
}
#triangle:before, #triangle:after {
  content: "";
  display: block;
  position: absolute;
  background: white;
  width: 100px;
  height: 50px;
  top: -10px;
  cursor: default;
}
#triangle:before {
  transform: rotate(-45deg);
  right: 0;
}
#triangle:after {
  transform: rotate(45deg);
  left: 0;
}

Answer 3

如果我们使用变换和 overflow:hidden

构建三角形，这可以用纯 CSS 来完成

FIDDLE

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

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

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

Make Only Triangle Have Hover Effect using CSS

html

css

css-shapes

FIDDLE