Question

我有一个三角形：

#tri{
width: 0;
height: 0;
float: right;
border-top: 25px solid red;
border-left: 25px solid transparent;
}

我希望整个三角区域都是一个链接，所以我做了：

<a href="...">
    <div id="tri">
    </div>
</a>

我还希望该区域“剪切”背景图像，因此它不是红色，而是图像的三角形部分。

我尝试了很多东西，但说实话，我只是在猜测 - 将其添加到#tri作为背景图片，并将img添加到div元素，如您所知这些都行不通。

我认为这是可能的，但我无法找到示例，教程或类似的演示。

有人可以帮我一把吗？

http://jsfiddle.net/XSgwv/

Answer 1

我建议创建一个三角形的图像并插入它：

<a href="...">
<img class="tri" src="some.jpg" alt="red triangle" >
</a>

您可以创建各种类来更改三角形的查看方式。

这样：

OR

<a href="...">
<img class="tri"   alt="red triangle"/>
</a>


.tri{
width: 0;
height: 0;
float: right;
border-top: 25px solid red;
border-left: 25px solid transparent;
}

请参阅： http://jsfiddle.net/yvytty/bwQJC/2/

我更喜欢使用类而不是id，只是在使用javascript和获取elementsById时更容易，这只是我的习惯。

Answer 2

您可以使用HTML元素与元素一起使用来定义图像映射。

<map name=a>
  <area shape=rect coords=25,25,75,75 href=#fail href="http://www.example.com">
</map>
<img usemap=#a src=image.png>

用三角坐标改变坐标..

带有图像叠加的“CSS形状”

2 个答案: