How I can make a border radios like in this picture? enter image description here
This is what I did until now
Until now I have this code:
.sidebar__pages {
text-decoration: none;
width: 100%;
height: 45%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
margin-top: 20%;
}
.sidebar__page {
text-decoration: none;
width: 100%;
height: 30%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.sidebar__page-button {
background-color: black;
border-top-left-radius: 38px;
border-bottom-left-radius: 38px;
//Here is the question ... how
}<ul className="sidebar__pages">
<li className="sidebar__page">
<NavLink to="/" className="sidebar__page-button" activeClassName="">
Administrare
</NavLink>
</li>Does anyone know please to help me find out how I can make this kind of border-radios? Thank you in advance ! :D
This might be a starting point for you:
a{
text-decoration: none;
color: #999
}
ul {
width: 100px;
list-style: none;
}
li{
position: relative;
padding: 10px;
}
li.active{
border: 1px solid #e9e9e9;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
position: relative;
margin-right: 20px;
}
li.active::before{
content: '';
display: block;
position: absolute;
top: -21px;
right: -20px;
width: 20px;
height: 20px;
border: 0;
border-bottom: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
border-bottom-right-radius: 20px;
}
li.active::after{
content: '';
display: block;
position: absolute;
bottom: -21px;
right: -20px;
width: 20px;
height: 20px;
border: 0;
border-top: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
border-top-right-radius: 20px;
}<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="active"><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>Here is a sample using two additional spans for the two corners. However there will be a problem with the menu shadow.
.container {
background-color: #e2e2e2;
padding: 20px 20px 20px 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #fff;
width: 200px;
}
li {
border-radius: 0 30px 30px 0;
display: block;
position: relative;
line-height: 30px;
height: 30px;
}
li a {
display: block;
text-decoration: none;
color: grey;
line-height: 30px;
padding-left:20px
}
li.active {
background-color: #e2e2e2;
border-radius: 30px 0 0 30px;
}
li.active span.top {
display: inline-block;
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: -15px;
right: 0;
}
li.active span.top:before {
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
border-radius: 50%;
bottom: 0;
right: 0;
box-shadow: 15px 15px 0 0 #e2e2e2;
}
li.active span.bottom {
display: inline-block;
width: 15px;
height: 15px;
overflow: hidden;
position: absolute;
top: 30px;
right: 0;
}
li.active span.bottom:before {
top: 0;
right: 0;
box-shadow: 15px -15px 0 0 #e2e2e2;
content: "";
display: block;
width: 200%;
height: 200%;
position: absolute;
border-radius: 50%;
}<div class="container">
<ul>
<li><a href="">Link 1</a></li>
<li class="active"><a href="">Link 2</a><span class="top"></span><span class="bottom"></span></li>
<li><a href="">Link 3</a></li>
<li><a href="">Link 4</a></li>
<li><a href="">Link 5</a></li>
</ul>
</div>