3

Espero pueda ayudarme y espero también pueda darme a entender para facilitar su redacción.

Me dispuse a crear un "menú" en forma de barra, dicha barra coloqué en la parte izquierda de mi página, de tal manera que todos los "items" o botones de dicho menú estuviesen colocados uno sobre otro de manera vertical, estos botones están solamente conformados por iconos, como se pueden ver en el siguiente código:

<div class="slidebar" id="div1">
    <a href="#"><i class="fa fa-home" aria-hidden="true"></i></a>
    <a href="#"><i class="fas fa-comments"></i></a>
    <a href="#"><i class="fas fa-shopping-cart"></i></a>
    <a href="#"><i class="fas fa-tags"></i></a>
    <a href="#"><i class="fas fa-sign-out-alt"></i></i></a>
</div>

[CSS]

    .slidebar{
    background: #04B486;
    /*margin-top: 70px;
    padding-top: 30px;*/
    position: fixed;
    left: 0;
    width: 80px;
    height: 100vh;
    top: 0px;
    padding-top: 120px;
  }
  .slidebar a{
    width: 57px;
    margin-left: 8px;
    font-size: 1.5em;
    color: #fff;
    display: block;

    padding-left: 15px;
    line-height: 80px;
    text-decoration: none;


    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;

  }

  .slidebar a:hover{
    background: #f4f5f9;
    color: #04B486;

  }

El problema es que necesito que los items y abajo tengan sus respectivos bordes también al momento de hacer hover en un ítem, de manera que si hago el hover sobre cualquier ítem, el ítem de arriba tenga borres en la parte inferior izquierda, y el ítem de abajo tenga su borde en la parte superior derecha, como en la siguiente imagen:

Menú Deseado

Como pudieron darse cuenta, lo bordes de los otros "Div A" están resaltados al momento de realizar un Hover.

Espero haberme dado a entender, a su vez, también espero me puedan ayudar para poder resolver mi duda, es lo principal, lograr lo mismo que la imagen de color rosa. También agradezco aquella persona que me corrigiera la estructuración de mi código en dado caso que estuviera mal estructurado. Agradezco cada uno de sus comentarios y el apoyo también, es la primera vez que publico por aquí, espero puedan entender el desorde.

6
  • Lo que deseas es lo que esta en la imagen?
    – HERRERA
    Commented el 1 may. 2020 a las 15:27
  • Si !, justo lo que está en la imagen. Commented el 1 may. 2020 a las 15:27
  • Así como lo tienes esta bien, no entiendo el problema.
    – HERRERA
    Commented el 1 may. 2020 a las 15:29
  • Ah disculpa, verás en la imagen se muestra una barra de color rosa, supongamos que se le aplicó un hover (al ítem de usuario de la imagen), si te das cuenta la parte superior derecha e inferior izquierda de dicho hover contienen unos bordes o contornos, dichos bordes o contornos mi código no los tiene termina en vertices. Espero haberme dado a entender. Commented el 1 may. 2020 a las 15:32
  • Espero que te sirva, la actualización de la respuesta.
    – HERRERA
    Commented el 1 may. 2020 a las 17:46

1 respuesta 1

1

Esto cumple con lo que deseas, solo es un ejemplo de como debería ser, mi idea fue poner un contenedor arriba y abajo de cada opción (puedes usar :before..), y generarle una curva

introducir la descripción de la imagen aquí

aqui hay otro ejemplo

.slidebar {
  background: #04B486;
  position: fixed;
  left: 0;
}

.slidebar a {
  width: 57px;
  margin-left: 8px;
  font-size: 1.5em;
  color: #fff;
  display: block;
  padding-left: 15px;
  line-height: 80px;
  text-decoration: none;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.principal:hover a {
  background: white;
  color: #04B486;
}

.principal:hover .antes {
  height: 20px;
  background-color: white;
}
.principal:hover .antes .antes1 {
  border-bottom-right-radius: 20px;
  height: 20px;
  background-color: #04B486;
}
.principal:hover .despues {
  height: 20px;
  background-color: white;
}
.principal:hover .despues .despues1 {
  border-top-right-radius: 20px;
  height: 20px;
  background-color: #04B486;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="slidebar" id="div1">
  <diV class="principal">
    <diV class="antes">
      <div class="antes1">
      </div>
    </div>
    <a href="#">
      <i class="fa fa-home" aria-hidden="true"></i>
    </a>
    <diV class="despues">
      <div class="despues1">
      </div>
    </div>
  </div>
  <diV class="principal">
    <diV class="antes">
      <div class="antes1">
      </div>
    </div>
    <a href="#">
      <i class="fas fa-comments" aria-hidden="true"></i>
    </a>
    <diV class="despues">
      <div class="despues1">
      </div>
    </div>
  </div>
  <diV class="principal">
    <diV class="antes">
      <div class="antes1">
      </div>
    </div>
    <a href="#">
      <i class="fas fa-shopping-cart" aria-hidden="true"></i>
    </a>
    <diV class="despues">
      <div class="despues1">
      </div>
    </div>
  </div>
  <diV class="principal">
    <diV class="antes">
      <div class="antes1">
      </div>
    </div>
    <a href="#">
      <i class="fas fa-sign-out-alt" aria-hidden="true"></i>
    </a>
    <diV class="despues">
      <div class="despues1">
      </div>
    </div>
  </div>
</div>

Este es un ejemplo con :before

.slidebar {
  background: #04B486;
  position: fixed;
  left: 0;
}

.slidebar a {
  width: 57px;
  margin-left: 8px;
  font-size: 1.5em;
  color: #fff;
  display: block;
  padding-left: 15px;
  line-height: 80px;
  text-decoration: none;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.principal:hover a {
  background: white;
  color: #04B486;
}

.principal:hover::before {
  height: 20px;
  content: "";
  background-color: #04B486;
  position: absolute;
  width: 65px;
  border-bottom-right-radius: 16px;
}

.principal:hover .antes::after {
  height: 20px;
  content: "";
  background-color: #04B486;
  position: absolute;
  margin-top: 100px;
  width: 65px;
  border-top-right-radius: 16px;
}

.principal:hover .antes {
  height: 20px;
  background-color: white;
}

.principal:hover .despues {
  height: 20px;
  background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">


<div class="slidebar" id="div1">
  <diV class="principal">
    <diV class="antes"></div>
    <a href="#"><i class="fa fa-home" aria-hidden="true"></i></a>
    <diV class="despues"></div>
  </div>
  <diV class="principal">
    <diV class="antes"></div>
    <a href="#"><i class="fas fa-comments" aria-hidden="true"></i>    </a>
    <diV class="despues"></div>
  </div>
  <diV class="principal">
    <diV class="antes"></div>
    <a href="#"><i class="fas fa-shopping-cart" aria-hidden="true"></i></a>
    <diV class="despues"></div>
  </div>
  <diV class="principal">
    <diV class="antes"></div>
    <a href="#"><i class="fas fa-sign-out-alt" aria-hidden="true"></i></a>
    <diV class="despues"></div>
  </div>
</div>

1
  • Te lo agradezco mucho, de corazón. Justo eso es lo que estaba buscando. Muchas gracias. Commented el 2 may. 2020 a las 2:09

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.