<div class="arrow"></div>
body {
background-color: #282828;
}
div.arrow {
width: 6vmin;
height: 6vmin;
box-sizing: border-box;
position: absolute;
left: 50%;
top: 50%;
transform: rotate(-45deg);
&::before {
content: '';
width: 100%;
height: 100%;
border-width: .8vmin .8vmin 0 0;
border-style: solid;
border-color: #fafafa;
transition: .2s ease;
display: block;
transform-origin: 100% 0;
}
&:after {
content: '';
float: left;
position: relative;
top: -100%;
width: 100%;
height: 100%;
border-width: 0 .8vmin 0 0;
border-style: solid;
border-color: #fafafa;
transform-origin: 100% 0;
transition:.2s ease;
}
&:hover::after {
transform: rotate(45deg);
border-color: orange;
height: 120%;
}
&:hover::before {
border-color: orange;
transform: scale(.8);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.