Skip to main content
Se convierte código a snippet
Origen Enlace
Ruslan López
  • 11.8k
  • 14
  • 44
  • 88
            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;
            }

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>

            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;
            }

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>

se añadieron 106 caracteres en el cuerpo
Origen Enlace

estaEsta 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.

introducir la descripción de la imagen aquí

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.

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.

introducir la descripción de la imagen aquí

Origen Enlace

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;
            }