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>