<div class="arrow-box">
<div class="arrow-round"></div>
</div>
:root {
--width: 50px;
}
body {
ovewrflow: hidden;
}
.arrow-box {
position: absolute;
width: var(--width);
height: var(--width);
top: 50%;
left: 50%;
transform: translate(-50%, -60%);
}
.arrow-box .arrow-round {
position: absolute;
width: var(--width);
height: var(--width);
border: calc(var(--width) / 4) solid #4C7F2E;
border-radius: 50%;
border-right-color: transparent;
transition: transform 1s;
}
.arrow-box .arrow-round::after {
content: "";
position: absolute;
top: -22.5%;
left: 65%;
border: calc(var(--width) * 0.5) solid #fff;
border-bottom-color: #4C7F2E;
border-left-color: transparent;
border-top-width: 0;
border-right-width: 0;
}
.arrow-box:hover .arrow-round {
transform: rotate(1turn) scale(1.2);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.