keep relative sized child elements within the border of the parent element to create ladder shape - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

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

Description

keep relative sized child elements within the border of the parent element to create ladder shape

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

.range-display {
   background-color: gray;
   height: 90px;
   position: relative;
   width: 160px;
}
.range-cocoon {<!-- w  ww.j a  va2  s  . com-->
   background-color: silver;
   bottom: 0;
   height: 75%;
   left: 0;
   position: absolute;
   width: 75%;
}
.range-point {
   background-color: lime;
   height: 33.333%;
   position: absolute;
   width: 33.333%;
}


      </style> 
 </head> 
 <body> 
  <h1>Range display with relative sizes</h1> 
  <div class="range-display"> 
   <div class="range-cocoon"> 
    <div class="range-point" style="bottom:0%;left:0%;"></div> 
    <div class="range-point" style="bottom:33.333%;left:33.333%;"></div> 
    <div class="range-point" style="bottom:66.666%;left:66.666%;"></div> 
    <div class="range-point" style="bottom:100%;left:100%;"></div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials