<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%);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.