Градиентные границы для навигационного меню

Question

Я пытаюсь добавить градиентные пересекающиеся границы без везения, как показано в прилагаемом примере, используя классы.

Приграничное Пример изображения

Ниже мой код.

Любая помощь будет оценена по достоинству.

<li class="newnav-links col-sm-6 dropdown-left dropdown-top">/li> 
<li class="newnav-links col-sm-6 dropdown-right dropdown-top">/li> 
<li class="newnav-links col-sm-6 dropdown-left dropdown-middle">/li> 
<li class="newnav-links col-sm-6 dropdown-right dropdown-middle">/li> 
<li class="newnav-links col-sm-6 dropdown-left dropdown-bottom">/li> 
<li class="newnav-links col-sm-6 dropdown-right dropdown-bottom">/li> 

Answer 1

             
  
 
   
 
    
* { 
 
    box-sizng : border-box; 
 
    } 
 
    ul { 
 
    list-style: none; 
 
    }  
 
li { 
 
    width: 40%; 
 
    float: left; 
 
position: relative; 
 
    padding:15px; 
 
    
 
} 
 
.newnav-links.dropdown-left.dropdown-top::after { 
 
background: rgba(0, 0, 0, 0) linear-gradient(#ffffff, #dddddd, 
 
    #999999,#333333, #000000, #000000, #000000) repeat scroll 0 0; 
 
} 
 
.newnav-links.dropdown-left.dropdown-bottom::after { 
 
background: rgba(0, 0, 0, 0) linear-gradient(#000, #000, 
 
    #000,#333333, #999, #ddd, #fff) repeat scroll 0 0; 
 
} 
 

 
li::after { 
 
bottom: 0; 
 
content: ""; 
 
height: 100%; 
 
position: absolute; 
 
right: 0; 
 
width: 1px; 
 
    } 
 
    li.dropdown-right.dropdown-top::after { 
 
    display: none; 
 
    } 
 
.newnav-links.dropdown-left.dropdown-middle::after { 
 
    background:#000000; 
 
} 
 
.dropdown-right::before { 
 
background: rgba(0, 0, 0, 0) linear-gradient(to right, #000000, #000000, 
 
#666666, #999999, #ffffff, #ffffff) repeat scroll 0 0; 
 
bottom: 0; 
 
content: ""; 
 
height: 1px; 
 
left: 0; 
 
position: absolute; 
 
width: 100%; 
 
} 
 
.dropdown-left::before { 
 
    background: rgba(0, 0, 0, 0) linear-gradient(to left, #000000, #000000, 
 
    #666666, #999999, #ffffff, #ffffff) repeat scroll 0 0; 
 
    bottom: 0; 
 
    content: ""; 
 
    height: 1px; 
 
    right: 0; 
 
    position: absolute; 
 
    width: 100%; 
 
} 
 
li.dropdown-bottom::before { 
 
display: none; 
 
}
 
    
<ul> 
 
<li class="newnav-links dropdown-left dropdown-top">link1</li> 
 
<li class="newnav-links dropdown-right dropdown-top">link2</li> 
 
<li class="newnav-links dropdown-left dropdown-middle">link3</li> 
 
<li class="newnav-links dropdown-right dropdown-middle">link4</li> 
 
<li class="newnav-links dropdown-left dropdown-bottom">link5</li> 
 
<li class="newnav-links dropdown-right dropdown-bottom">link6</li> 
 
</ul>
 
   
 
  
 
 

 

Answer 2

Попробуйте это

.top-to-bottom { 
    border-width: 3px; 
    border-style: solid; 
    -webkit-border-image: 
     -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
    -webkit-border-image: 
     -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; 
    -moz-border-image: 
     -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%;  
    -o-border-image: 
     -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; 
    border-image: 
     linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
} 
.bottom-to-top { 
    border-width: 3px; 
    border-style: solid; 
    -webkit-border-image: 
     -webkit-gradient(linear, 0 100%, 0 0, from(black), to(rgba(0, 0, 0, 0))) 1 100%; 
    -webkit-border-image: 
     -webkit-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
    -moz-border-image: 
     -moz-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
    -o-border-image: 
     -o-linear-gradient(bottom, black, rgba(0, 0, 0, 0)) 1 100%; 
    border-image: 
     linear-gradient(to top, black, rgba(0, 0, 0, 0)) 1 100%; 
} 

кредитов идет на этот сайт: https://css-tricks.com/examples/GradientBorder/