Align arrows on hr - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Arrow

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Arrow

Description

Align arrows on hr

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>
.horizontal-timeline {<!--   w w w .j a va 2 s .c om-->
   margin:31px;
}

.horizontal-timeline hr
 {
   border:none;
   height:7px;
   color:Chartreuse;
   background-color:yellow;
   margin:0;
   position:relative;
}

.arrow-up {
   width:0;
   height:0;
   border-left:21px solid blue;
   border-right:21px solid pink;
   vertical-align:baseline;
   border-bottom:21px solid WhiteSmoke;
   display:inline-block;
   position:absolute;
   top:11px;
}

.arrow-down {
   width:0;
   height:0;
   border-left:21px solid OrangeRed;
   border-right:21px solid grey;
   border-top:21px solid BlueViolet;
   display:inline-block;
   position:absolute;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="horizontal-timeline"> 
   <div class="arrow-up" style="left: 20%;"></div> 
   <div class="arrow-up" style="left: 60%;"></div> 
   <hr> 
   <div class="arrow-down" style="left: 40%;"></div> 
   <div class="arrow-down" style="left: 80%;"></div> 
  </div>  
 </body>
</html>

Related Tutorials