html - Angular 横幅CSS

我正在创建一个角落横幅用于一些网站，我使用以下CSS方法来创建一个三角形；

#corner-ad-btn {
position: absolute;
top:0;
right:0;
width:0px;
height:0px;
border-top: 420px solid #fff;
border-left: 420px solid transparent;
z-index: 100;}

我是他们在html中使用的；

<a href="#" id="corner-ad-btn">

这是在实际的jpg广告之上的。它工作的很好，除了按钮对整个正方形区域是活动的，这将覆盖太多的网站。透明区域是否不可点击？
我尝试了另一种方法，其中did是旋转和隐藏的，但这需要在主体上隐藏溢出，这在站点上不起作用。
这里有一个jsfiddle

最佳答案

根据我在评论中的建议，下面是一个使用<map>和<area>标记的图像上的三角形按钮示例：

<img id="corner-ad-btn" width="420" height="420" usemap="corner-ad-map" src="#" />
<map name="corner-ad-map">
    <area shape="poly" coords="0,0,420,0,420,420" href="#"></area>
</map>

Fiddle