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

I would suggest creating an image of the triangle and inserting it like this:

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

You can create various classes to change the way the triangle is viewed.

so:

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;
}

Please see: http://jsfiddle.net/yvytty/bwQJC/2/

I prefer to use classes than id's, just makes it easier when also using javascript and getting elementsById, just a habit I am in.

于 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 に答える