1

我有一个三角形：

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

4

2 回答 2

2

我建议创建三角形的图像并像这样插入它：

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

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

所以：

或者

<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 时更容易，这只是我的一个习惯。

于 2013-07-07T15:24:23.713 回答
1

您可以使用 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>

用你的三角坐标改变坐标..

于 2013-07-07T15:20:07.893 回答