<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html {
scroll-behavior: smooth;
}
.arrowDown, .arrowUp, .arrowRight, .arrowLeft {
position: relative;
display: inline-block;
width: 26px;
height: 26px;
border-radius: 5px;
background-color: rgb(65, 65, 65);
}
.arrowDown::before {
content: "";
position: absolute;
top: 7px;
left: 5px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 14px solid white;
}
.arrowUp::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 14px solid white;
}
.arrowRight::before {
content: "";
position: absolute;
top: 5px;
left: 7px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-left: 14px solid white;
}
.arrowLeft::before {
content: "";
position: absolute;
top: 5px;
left: 5px;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 14px solid white;
}
</style>
</head>
<body id="inicio">
<span class="arrowDown"></span>
<span class='arrowUp'></span>
<span class='arrowRight'></span>
<span class="arrowLeft"></span>
</body>
</html>
Comentarios sobre la versión: 1 (1)