Andy Mikellides Andy Mikellides - 18 days ago 9
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
 
   * {
   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>
Comments