带有剪辑路径的自定义链接形状和动画[重复]答案

【问题标题】：Custom Link Shape and Animation with Clip-Path [duplicate]带有剪辑路径的自定义链接形状和动画[重复]
【发布时间】：2020-11-29 16:41:49
【问题描述】：

我最近一直在学习 CSS 中剪辑路径的神奇属性，但在尝试创建自定义图像链接时遇到了问题。我一直无法让实际形状成为可点击的链接。

当我尝试将<a> 放置在剪裁的 div 中时，形状本身将无法点击 - 即使我将其设置为与其父 div 相同的尺寸。这是可链接剪辑路径 (https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/) 的参考站点。

我想知道它是否不能成为链接，因为它在鼠标悬停时有动画？这是我的代码 sn-p。

/* Styles the link */
#inner-link {
  width: 200px;
  height: 200px;
}

/* Styles the parent container */
#button-container {
  width: 200px;
  height: 200px;
  margin: 10%;
  background-color: #ed991c;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
}
#button-container:hover {
  animation: arrow 0.5s forwards;
}

/* animation from triangle to arrow */
@keyframes arrow {
  0% {
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
    background-color: #ed991c;
  }
  100% {
    clip-path: polygon(30% 0%, 100% 50%, 30% 100%, 30% 75%, 0% 75%, 0% 25%, 30% 25%);
    background-color: #edd11c;
  }
}

<div id="button-container">
  <a id="inner-link" href="https://www.target.com/"><a>
 </div>

【问题讨论】：

标签： html css css-animations clip-path

【解决方案1】：

a标签是内联元素，内联元素没有高度和宽度。

快速解决方法是将display: block 或display: inline-block 添加到您的#inner-link。

#inner-link {
    width: 200px;
    height: 200px;
    display: block;
}

#inner-link {
  width: 200px;
  height: 200px;
  display: block;
}


/* Styles the parent container */

#button-container {
  width: 200px;
  height: 200px;
  margin: 10%;
  background-color: #ed991c;
  clip-path: polygon( 50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
}

#button-container:hover {
  animation: arrow 0.5s forwards;
}


/* animation from triangle to arrow */

@keyframes arrow {
  0% {
    clip-path: polygon( 50% 0%, 100% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%, 0% 100%);
    background-color: #ed991c;
  }
  100% {
    clip-path: polygon( 30% 0%, 100% 50%, 30% 100%, 30% 75%, 0% 75%, 0% 25%, 30% 25%);
    background-color: #edd11c;
  }
}

<div id="button-container">
  <a id="inner-link" href="https://www.target.com/"></a>
</div>

【讨论】：