<link href="https://fonts.googleapis.com/css?family=Cardo:700&display=swap" rel="stylesheet">

<div class="wrapper">
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <a href=""></a>
  <span class="fill-text" data-text="alkis">alkis</span>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f5f3f2;
  background: #121317;
}

.wrapper {
  --text-color: #fff;
  position: relative;
  
  a {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    &:nth-child(1) { // top triangle
      -webkit-clip-path: polygon(0 0, 100% 0, 50% 50%);
      clip-path: polygon(0 0, 100% 0, 50% 50%);
    }
    
    &:nth-child(2) { // right triangle
      -webkit-clip-path: polygon(100% 0, 100% 100%, 50% 50%);
      clip-path: polygon(100% 0, 100% 100%, 50% 50%);
    }
    
    &:nth-child(3) { // bottom triangle
      -webkit-clip-path: polygon(0 100%, 50% 50%, 100% 100%);
      clip-path: polygon(0 100%, 50% 50%, 100% 100%);
    }
    
    &:nth-child(4) { // left triangle
      -webkit-clip-path: polygon(0 0, 50% 50%, 0 100%);
      clip-path: polygon(0 0, 50% 50%, 0 100%);
    }
    
    &:hover {
      -webkit-clip-path: none;
      clip-path: none;
      z-index: 2;
    }
    
    &:nth-child(1):hover ~ .fill-text { // top triangle
      
      &:before {
        --fill-from: circle(0% at 50% 0%);
        --fill-to: circle(150% at 0% 50%);
        animation: fill-text 3s forwards;
      }
      
      &:after {
        --hover-text: "You hovered me from top";
      }
    }
    
    &:nth-child(2):hover ~ .fill-text { // right triangle
      
      &:before {
        --fill-from: circle(0% at 150% 50%);
        --fill-to: circle(100% at 50% 50%);
        animation: fill-text 3s forwards;
      }
      
      &:after {
        --hover-text: "You hovered me from right";
      }
    }
    
    &:nth-child(3):hover ~ .fill-text { // bottom triangle
      
      &:before {
        --fill-from: circle(0% at 50% 100%);
        --fill-to: circle(150% at 0% 50%);
        animation: fill-text 3s forwards;
      }
      
      &:after {
        --hover-text: "You hovered me from bottom";
      }
    }
    
    &:nth-child(4):hover ~ .fill-text { // left triangle
      
      &:before {
        --fill-from: circle(0% at 0% 50%);
        --fill-to: circle(150% at 0% 50%);
        animation: fill-text 3s forwards;
      }
      
      &:after {
        --hover-text: "You hovered me from left";
      }
    }
  }
}

@keyframes fill-text {
  0% {
    clip-path: var(--fill-from);
  }
  
  100% {
    clip-path: var(--fill-to);
    color: var(--text-color);
  }
}

.fill-text {
  color: transparent;
  -webkit-text-stroke: 1px var(--text-color);
  text-stroke: 1px var(--text-color);
  font-size: 20vw;
  font-family: 'cardo', serif;
  
  &:before {
    content: attr(data-text);
    position: absolute;
  }
  
  &:after {
    --hover-text: "You hovered me from xxxx";
    content: var(--hover-text);
    -webkit-text-stroke: initial;
    text-stroke: initial;
    font: 2vw/1.5 verdana;
    color: #999;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translatex(-50%);
    white-space: nowrap;
  }
}