¿Cómo puedo hacer unas radios fronterizas como en esta foto? ingrese la descripción de la imagen aquí
Esto es lo que hice hasta ahora
ingrese la descripción de la imagen aquí
Hasta ahora tengo este código:
.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>¿Alguien sabe por favor que me ayude a averiguar cómo puedo hacer este tipo de border-radios? Gracias de antemano ! :D
Este podría ser un punto de partida para ti:
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>Aquí hay una muestra usando dos tramos adicionales para las dos esquinas. Sin embargo, habrá un problema con la sombra del menú.
.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>