<div class="background">
  <div class="list">
    <a class="item">
      <div class="text">ListItem1</div>      
    </a>
    <a class="item">
      <div class="text">ListItem2</div>      
    </a>
    <a class="item">
      <div class="text">ListItem3</div>      
    </a> 
    <a class="item">
      <div class="text">ListItem4</div>      
    </a> 
  </div>
</div>
.background {
  background-color: black;
  width: 400px;
  height: 400px;
}

.list {
  padding: 10px;
  * + * {
    margin-top: 10px;
  }
}

.item {
  display: block;
  position: relative;
  text-decoration: none;

  width: 100%;
  height: 100%;

  z-index: 0;
  
  &:hover:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';

    width: 100%;
    height: 100%;

    z-index: 1;

    background-color: #3DE3F1;
    clip-path: polygon(10% 0, 95% 35%, 100% 60%, 5% 100%, 0 85%);
    animation-name: widePentagonAnimation;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    @keyframes widePentagonAnimation {
      0% {
        clip-path: polygon(
          calc(10% + 1%) calc(0% + 0%),
          calc(95% + 0%) calc(35% + 0%),
          calc(100% + 0%) calc(60% + 0%),
          calc(5% + 0%) calc(100% + 0%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
      25% {
        clip-path: polygon(
          calc(10% + 0%) calc(0% + 0%),
          calc(95% + 0%) calc(35% + 0%),
          calc(100% - 1%) calc(60% + 0%),
          calc(5% + 0%) calc(100% + 1%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
      50% {
        clip-path: polygon(
          calc(10% + 0%) calc(0% + 1%),
          calc(95% + 0%) calc(35% + 0%),
          calc(100% + 0%) calc(60% - 1%),
          calc(5% + 0%) calc(100% + 0%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
      75% {
        clip-path: polygon(
          calc(10% + 0%) calc(0% + 0%),
          calc(95% - 1%) calc(35% - 1%),
          calc(100% + 0%) calc(60% + 0%),
          calc(5% + 0%) calc(100% + 0%),
          calc(0% + 1%) calc(85% + 0%)
        );
      }
      100% {
        clip-path: polygon(
          calc(10% + 0%) calc(0% + 0%),
          calc(95% + 0%) calc(35% + 0%),
          calc(100% + 0%) calc(60% + 0%),
          calc(5% + 0%) calc(100% + 0%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
    }    
  }

  &:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';

    width: 100%;
    height: 100%;

    z-index: 2;

    background-color: #C21C0E;
    mix-blend-mode: color-dodge;
    clip-path: polygon(5% 5%, 100% 0%, 85% 100%, 0% 85%);
    animation-name: parallelogramAnimation;
    animation-duration: 1s;
    animation-iteration-count: infinite;

    @keyframes parallelogramAnimation {
      0% {
        clip-path: polygon(
          calc(5% + 0%) calc(5% + 0%),
          calc(100% + 0%) calc(0% + 0%),
          calc(85% + 0%) calc(100% + 0%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
      25% {
        clip-path: polygon(
          calc(5% + 1%) calc(5% + 0%),
          calc(100% + 0%) calc(0% + 0%),
          calc(85% - 1%) calc(100% + 0%),
          calc(0% + 0%) calc(85% + 1%)
        );
      }
      50% {
        clip-path: polygon(
          calc(5% + 0%) calc(5% + 1%),
          calc(100% + 0%) calc(0% + 0%),
          calc(85% + 0%) calc(100% - 1%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
      75% {
        clip-path: polygon(
          calc(5% + 0%) calc(5% + 0%),
          calc(100% - 1%) calc(0% - 1%),
          calc(85% + 0%) calc(100% + 0%),
          calc(0% + 1%) calc(85% + 0%)
        );
      }
      100% {
        clip-path: polygon(
          calc(5% + 0%) calc(5% + 0%),
          calc(100% + 0%) calc(0% + 0%),
          calc(85% + 0%) calc(100% + 0%),
          calc(0% + 0%) calc(85% + 0%)
        );
      }
    }
  }
}

.text {
  position: relative;
  z-index: 3;
  padding: 10px 8%;
  color: white;
  
  &:hover{
    color: black;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.