Custom Link Shape and Animation with Clip-Path

Question

I have recently been learning about the magical properties of clip-path in CSS, but I ran into a problem when trying to create a custom image link. I have been unable to get the actual shape to be a clickable link.

When I try and place an <a> within the clipped div, the shape itself will not be clickable - even if I set it to the same dimensions as it's parent div. This is my reference site for the linkable clip-path ( https://css-tricks.com/the-many-ways-to-link-up-shapes-and-images-with-html-and-css/ ).

I am wondering if it's not able to be a link since it has an animation upon mouse hover? Here is my code snippet.

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

score 1 · Accepted Answer · answered Aug 10 '20 at 04:33

a tag is an inline element, and inline elements don't have heights or widths.

A quick fix would be to add display: block or display: inline-block to your #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>

Custom Link Shape and Animation with Clip-Path

1 Answers1