body {
font-family: 'Roboto';
width: 100%;
height: 100vh;
margin: 0;
}
aside {
color: #fff;
width: 250px;
padding-left: 20px;
height: 100vh;
background-image: linear-gradient(30deg , #0048bd, #44a7fd);
border-top-right-radius: 80px;
}
aside a {
font-size: 12px;
color: #fff;
display: block;
padding: 12px;
padding-left: 30px;
text-decoration: none;
}
aside a:hover {
color: #3f5efb;
background: #fff;
position: relative;
background-color: #fff;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
}
aside a i {
margin-right: 5px;
}
aside a:hover::after {
content: "";
position: absolute;
background-color: transparent;
bottom: 100%;
right: 0;
height: 35px;
width: 35px;
border-bottom-right-radius: 18px;
box-shadow: 0 20px 0 0 #fff;
}
aside a:hover::before {
content: "";
position: absolute;
background-color: transparent;
top: 38px;
right: 0;
height: 35px;
width: 35px;
border-top-right-radius: 18px;
box-shadow: 0 -20px 0 0 #fff;
}
Bart from Gif 2 SVG notepad code
Nenhum comentário:
Postar um comentário