Gradient Cross Grenzen für Navigationsmenü

Question

Ich versuche, Gradient Cross Borders ohne Glück hinzuzufügen, wie im beigefügten Beispiel mit Klassen gezeigt.

Cross Border Bild Beispiel

Unten ist mein Code.

Jede Hilfe wird geschätzt.

<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

testen

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

Credits geht auf dieser Website: https://css-tricks.com/examples/GradientBorder/