Html 如何制作包含超过div的矩形链接

在我们的网站上，我们有以下按钮：

现在我们需要从上面创建链接，但上面没有这个磁带

问题是，它还在磁带左上角的空白空间中创建链接

我们尝试了什么 使磁带笔直并用CSS旋转。它非常好，除了旧浏览器不支持它之外。另外，最好将该链接保持在空白容器div中

HTML 问题是，它还在磁带左上角的空白空间中创建链接

对于现代浏览器，您可以使用：

你可以用

将按钮用作图像。 然后使用正确的图像映射定义图像的可单击区域。

---

您必须将磁带从该链接元素中排除，因为事件在DOM层次结构中冒泡。您不能从标记中移动磁带并将其放在外部。然后给出位置：相对于父div。我会尝试移除div并使用锚定，锚定显示为块，并将图片作为背景，文本作为锚定标题。谢谢。我们也在考虑这个问题，但我们真的不想把这个按钮作为图像。主要是因为我们的网站上会有更多不同大小的按钮。真的谢谢你，我们会使用你的解决方案。和旧浏览器。好我不想粗俗：

<div class="box-body buttons-text clearfix">
    <a href="#">
        <div class="tape"></div>
        <img src="/images/fire.png" class="left">
        <span>HOT JOB</span>
    </a>
</div>

.box-body {
    padding: 10px 20px;
    position: relative;
    background: #ffffff;
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
}

.tape {
    background: url("../images/tape.png") center 0 no-repeat;
    width: 145px;
    height: 54px;
    position: absolute;
    bottom: 46px;
    left: 83px;
}

.tape {
    pointer-events: none;
}