html - 悬停时突出显示 div 内的非矩形部分

Question

我有一个 div ( rectangle )，在里面我想要一个三角形。我想在悬停时强调这一点。我怎么做？

我正在考虑拥有 2 张具有相同形状和不同不透明度的图像，并在悬停时交换它们。会有另一种方法吗？你能有一个非矩形的div吗？

Answer 1

这取决于您需要在 Internet Explorer 中返回多远以及您使用它的三角形的上下文，但假设您不关心 Internet Explorer。

@CSS Tricks 上的 Chris Coyer 已经设置了一个很好的教程。
http://css-tricks.com/triangle-with-shadow/

如果您打算将其用作图标或按钮，您可能需要查看 http://fortawesome.github.io/Font-Awesome/。它完全免费并且很容易实现。我在几个项目中使用过它，它是为与 bootstrap 一起使用而设计的。

希望这可以帮助。

Answer 2

你可以试试：http: //jsfiddle.net/H42U7/

CSS代码是：

.triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #959595;}

.triangle-up:hover {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #123456;}

的HTML：

<div id="container">
<div class="triangle-up">
</div></div>

要旋转三角形，请查看此站点： http ://css-tricks.com/examples/ShapesOfCSS/