<div class="d-4">Moodly</div>
.d-4 {
  font-size: 10rem;
    --c: 20px;
    --g: calc(var(--c) * 0.707);
    border-width: medium;
    border-left: var(--c) solid transparent;
    border-bottom: var(--c) solid transparent;
    border-right: 0 solid transparent;
    border-top: 0 solid transparent;
    background: linear-gradient(
-45deg,transparent var(--g),hsla(0,0%,100%,.6) 0) 0 /var(--c) 100%,linear-gradient(
135deg,transparent var(--g),hsla(0,0%,100%,.3) 0) bottom /100% var(--c);
    background-repeat: no-repeat;
    background-origin: border-box;
    transition: .3s,background-color .3s .3s,color .3s .3s;
    transform: translate(calc(var(--c) / -1),calc(var(--c) / 1));
    -webkit-clip-path: polygon(var(--c) 0,var(--c) 0,100% 0,100% calc(100% - var(--c)),100% calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)));
    clip-path: polygon(var(--c) 0,var(--c) 0,100% 0,100% calc(100% - var(--c)),100% calc(100% - var(--c)),var(--c) calc(100% - var(--c)),var(--c) calc(100% - var(--c)));
  padding: 10px;

}
.d-4:hover {
    transition: .3s .3s,background-color .3s,color .3s;
    background-color: blue;
    color: #fff;
    transform: translate(0);
    -webkit-clip-path: polygon(0 var(--c),var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 100%);
    clip-path: polygon(0 var(--c),var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 100%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.