Skip to main content
3 de 3
Se convierte código a snippet
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88

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í