Question

我有一个div（矩形），在里面我想要一个三角形的形状。我想在悬停时突出显示。我该怎么做？

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

Answer 1

这取决于您需要走多远的互联网资源管理器以及您使用它的三角形的背景，但假设您不关心Internet Explorer。

Chris Coyer对@ CSS Tricks已经设置了很好的教程 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/

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

2 个答案: