CSS responsive layout with diagonal shapes aligned to bottom right - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Responsive Layout

Description

CSS responsive layout with diagonal shapes aligned to bottom right

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">
.test {<!--   w ww.j  a va2  s . co m-->
   position:absolute;
   top:91vh;
   width:99%;
   text-align:right;
   padding:0px;
   z-index:3;
}

.diagonal {
   background-color:Chartreuse;
   position:absolute;
   top:91vh;
   width:99%;
   height:201px;
   z-index:-2;
   -webkit-transform:skewY(-46deg);
   -webkit-transform-origin:81% 0px;
   transform:skewY(-46deg);
   transform-origin:81% 0px;
}
</style> 
 </head> 
 <body> 
  <div class="test">
    Lorem ipsu 
  </div> 
  <div class="diagonal"></div>  
 </body>
</html>

Related Tutorials