HTML
<span class="arrow2"></span>
<span class="arrow2 arrow2-white"></span>
<span class="arrow2 arrow2-white arrow2-btm"></span>
CSS
.arrow2 {
display: block;
position: relative;
width: 18px;
height: 18px;
border-radius: 50%;
}
.arrow2,
.arrow2::after {
border: 1px solid #56b9bf;
}
@media print, screen and (min-width: 641px) { /* pc only */
.arrow2,
.arrow2::after {
transition: .3s;
}
}
.arrow2::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 5px;
height: 5px;
border-width: 1px 1px 0 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
margin-left: -3.7px;
margin-top: -2.5px;
}
.arrow2.arrow2-white {
border: none;
background-color: #fff;
}
.arrow2.arrow2-white::after {
border-color: #4a98a9;
}
.arrow2.arrow2-btm::after {
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
margin-left: -2.5px;
}