Triangular nav. bar - HTML CSS CSS Widget

Description

Triangular nav. bar
Demo Code

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
.tri-wrap {<!--from   ww w.j a v a  2  s  . c  om-->
   margin:2em auto;
   width:601px;
}

.triangle {
   float:left;
   width:0;
   height:0;
   border-left:100px solid Chartreuse;
   border-right:100px solid yellow;
}

.down {
   border-top:121px solid blue;
}

.up {
   border-bottom:121px solid pink;
}

.down:hover {
   border-top:121px solid OrangeRed;
   cursor:pointer;
}

.down:hover:hover>.tri-text-down {
   display:block;
   color:grey;
   font-family:"Century Gothic";
   text-transform:uppercase;
}

.up:hover {
   border-bottom:121px solid BlueViolet;
   cursor:pointer;
}

.up:hover:hover>.tri-text-up {
   display:block;
   color:Chartreuse;
   font-family:"Century Gothic";
   text-transform:uppercase;
}

.tri-text-down {
   margin:-7em -2.5em;
   color:yellow;
   display:none;
}

.tri-text-up {
   margin:5.2em -2.76em;
   color:blue;
   display:none;
}

.txt-pad {
   margin:5.2em -4.2em;
   color:pink;
   display:none;
}

.negativeM {
   margin-left:-6em;
}

.last {
   border-bottom:121px solid OrangeRed;
}

.last:hover {
   border-bottom:121px solid grey;
   color:BlueViolet;
}
</style> 
 </head> 
 <body> 
  <div class="tri-wrap"> 
   <div class="triangle up"> 
    <div class="tri-text-up">
      Lorem ip 
    </div> 
   </div> 
   <div class="triangle down negativeM"> 
    <div class="tri-text-down">
      Lorem 
     <br>Lorem 
    </div> 
   </div> 
   <div class="triangle up last negativeM"> 
    <div class="tri-text-up txt-pad">
      Lorem ipsum do 
    </div> 
   </div> 
  </div>  
 </body>
</html>
Triangular nav. bar - HTML CSS CSS Widget

Description

Demo Code

Related Tutorials
