Andy Mikellides Andy Mikellides - 1 year ago 56
CSS Question

Gradient cross borders for navigation menu

I am trying to add gradient cross borders with no luck as shown in the attached example using classes.

Cross Border image example

enter image description here

Below is my code.

Any help will be appreciated.

<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 Source
 
   * {
   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>