1

body {
  font-family: Poppins;
  font-size: 16px;
  background: #262626;
}

.nav-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 50%;
  display: block;
  list-style: none;
}

.nav-area li {
  position: relative;
  float: left;
  background: #039bab;
  line-height: 20px;
  padding: 20px 14px;
  margin-right: 20px;
}

.nav-area li a {
  display: block;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

.nav-area li:first-of-type {
  margin-left: 30px;
}

.nav-area li:last-of-type {
  margin-right: 0;
}

.nav-area li:before {
  content: '';
  position: absolute;
  background: none;
  border-left: 20px solid transparent;
  border-right: 0px solid transparent;
  border-top: 40px solid #039bab;
  left: -20px;
  top: 0;
}

.nav-area li:after {
  content: '';
  position: absolute;
  border-left: 0px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 40px solid #039bab;
  right: -19px;
  top: 0;
  width: 0;
  height: 0;
}

.nav-area li:first-of-type:before {
  width: 10px;
  height: 40px;
  background: #039bab;
  left: -10px;
  border: none;
}

.nav-area li:hover {
  cursor: pointer;
  background: #000;
}

.nav-area li:hover:before {
  border-top: 40px solid #000;
}

.nav-area li:hover:after {
  border-bottom: 40px solid #000;
}

.nav-area li:first-of-type:hover:before {
  background: #000;
  width: 10px;
  height: 0;
}

.nav-area li:last-of-type:after {
  border: none;
  width: 10px;
  height: 40px;
  background: #039bab;
  right: -10px;
}

.nav-area li:last-of-type:hover:after {
  background: #000;
  width: 10px;
  height: 40px;
}
<ul class="nav-area">
  <li><a href="#">Casa</a></li>
  <li><a href="#">Acerca</a></li>
  <li><a href="#">Portafolio</a></li>
  <li><a href="#">Servicios</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

Como se habrán dado cuenta se trata de nav menu bar, quiero formar las figuras en forma de flecha, left arrow, como se le quiera llamar, pero algo me está faltando en el ángulo, parecieran trapecios parados la verdad y no los puedo moldear como quisiera. He estado tratando con otro tipo de codificación, le estuve mueve y mueve en los ángulos, apliqué border width en el que supuse era el li before principal, pero encima de eso se deforma más. Les agradecería mucho el aporte y que tengan buenos días ya porque son madrugadas, hasta luego


Miren, ya llevo un avance. Tuve que darle un giro de tuerca al código revirtiendo el li:before y li:after intercambiando los valores del border-left y border-right, como voy a presentar a continuación

    <style>
                body{
                    font-family: Poppins;
                    font-size: 16px;
                    background: #262626;
                }
                .nav-area{
                    position: absolute;
                    top: 40%;
                    left: 40%;
                    transform: translate(-50%, -50%);
                    height: 40%;
                    display: block;
                    list-style: none;
                }
                .nav-area li{
                    position: relative;
                    float: left;
                    background: #039bab;
                    line-height: 10px;
                    padding: 20px 14px;
                    margin-right: 20px;
                }
                .nav-area li a{
                    display: block;
                    text-decoration: none;
                    color: #fff;
                    text-transform: uppercase;
                }
                .nav-area li:first-of-type{
                    margin-left: 30px;
                }
                .nav-area li:last-of-type{
                    margin-right: 0;
                }
                .nav-area li:before{
                    content: '';
                    position: absolute;
                    background: none;
                    border-left: 0px solid transparent;
                    border-right: 20px solid transparent;
                    border-top: 50px solid #039bab;
                    left: -20px;
                    top: 0;
                }
                .nav-area li:after{
                    content: '';
                    position: absolute;
                    border-left: 0px solid transparent;
                    border-right: 30px solid transparent;
                    border-bottom: 50px solid #039bab;
                    right: -19px;
                    top: 0;
                    width: 0;
                    height: 0;
                }
                .nav-area li:first-of-type:before{
                    width: 0;
                    height: 40px;
                    background: #039bab;
                    left: -10px;
                    border: none;
                }
                .nav-area li:hover{
                    cursor: pointer;
                    background: #000;
                }
                .nav-area li:hover:before{
                   border-top: 50px solid #000; 
                }
                .nav-area li:hover:after{
                    border-bottom: 50px solid #000;
                }
                .nav-area li:first-of-type:hover:before{
                    background: #000;
                    width: 10px;
                    height: 0;
                }
                .nav-area li:last-of-type:after{
                    border: none;
                    width: 0;
                    height: 0;
                    background: #039bab;
                    right: -10px;
                }
                .nav-area li:last-of-type:hover:after{
                    background: #000;
                    width: 40px;
                    height: 0;
                }
    </style>

Sin embargo si bien ya conseguí que cediera a la abertura como lo voy a mostrar a continuación

introducir la descripción de la imagen aquí

Como se habrán dado cuenta aún no cierra la flecha. ¿Qué es lo que realmente me estará haciendo falta? Ahora sí que le he movido de todo y no, no hay manera de que la parte derecha hacia la pantalla se mueva justo para allá, izquierda acorde a la dirección de nuestra mano

3
  • tal vez esto te de una idea jsfiddle.net/javatlacati/8xq94sc6 Commented el 2 dic. 2021 a las 17:00
  • una pregunta, como hago para eliminar por completo la respuesta que me eliminaron?, no me gusta que me aparezca ya en mi ´perfil, yo se los que tienen otra cuenta no les va a aparecer pero en mi caso si quiero eliminarla ya, no tengo como eliminarla puesto que hay una opción sustituta llamada recuperar y eso no me sirve Commented el 2 dic. 2021 a las 22:27
  • Esa suena a una excelente pregunta para meta Commented el 2 dic. 2021 a las 22:43

1 respuesta 1

1

Esta vez si es una respuesta, tranquilos, después de darle tumbos a mi cabeza casi una semana, al fin lo logré. Esto fue lo que logré, quedó en right arrows, pero supongo que para los que vean esto también lo podrán invertir en left arrows, pero por lo pronto les dejo mi código terminado. Suerte y gracias.

body {
  font-family: Poppins;
  font-size: 16px;
  background: #262626;
}

.nav-area {
  /*                position: absolute;
                    top: 10%;
                    left: 30%;
                    transform: translate(-50%,-50%);
                    height: 60px;
                    display: block;*/
  list-style: none;
}

.nav-area li {
  position: relative;
  float: left;
  background: #039bab;
  line-height: 30px;
  padding: 10px 14px;
  margin-right: 20px;
}

.nav-area li a {
  display: block;
  text-decoration: none;
  color: #fff;
  text-transform: uppercase;
}

.nav-area li:first-of-type {
  margin-left: 30px;
}

.nav-area li:last-of-type {
  margin-right: 0;
}

.nav-area li:before {
  content: '';
  position: absolute;
  background: none;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-top: 25px solid #039bab;
  border-bottom: 25px solid #039bab;
  left: -20px;
  top: 0px;
}

.nav-area li:after {
  content: '';
  position: absolute;
  border-left: 20px solid #039bab;
  border-right: 0px solid #039bab;
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  right: -19px;
  top: 0px;
  width: 0;
  height: 0;
}

.nav-area li:first-of-type:before {
  width: 0px;
  height: 40px;
  background: #039bab;
  left: 0px;
  border: none;
}

.nav-area li:last-of-type:after {
  border: none;
  width: 0px;
  height: 40px;
  background: #039bab;
  right: 0px;
}

.nav-area li:hover {
  cursor: pointer;
  background: #000;
}

.nav-area li:hover:before {
  border-bottom: 25px solid #000;
}

.nav-area li:hover:after {
  border-top: 25px solid #000;
}

.nav-area li:hover:before {
  border-top: 25px solid #000;
}

.nav-area li:hover:after {
  border-bottom: 25px solid #000;
}

.nav-area li:hover:after {
  border-left: 20px solid #000;
}

.nav-area li:first-of-type:hover:before {
  background: #000;
  width: 10px;
  height: 0;
}

.nav-area li:last-of-type:hover:after {
  background: #000;
  width: 10px;
  height: 0px;
}
<ul class="nav-area">
  <li><a href="#">Casa</a></li>
  <li><a href="#">Acerca</a></li>
  <li><a href="#">Portafolio</a></li>
  <li><a href="#">Servicios</a></li>
  <li><a href="#">Contacto</a></li>
</ul>

introducir la descripción de la imagen aquí

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.