Responsively Align Slanted Divs - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Responsive Layout

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

Description

Responsively Align Slanted Divs

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolor</title> 
  <style>
* {<!-- w w  w  .  j  a v  a 2s.  c  o m-->
   margin:0;
   padding:0;
}

.hero {
   width:100%;
   position:relative;
   border:2px solid Chartreuse;
   background-color:yellow;
}

.slanted {
   position:relative;
   background-color:blue;
   width:41%;
   padding:4em 0 4em 2em;
}

.slanted:after {
   content:'';
   background-color:pink;
   position:absolute;
   top:0;
   bottom:0;
   right:-7em;
   width:21em;
   overflow:visible;
   z-index:2;
   -webkit-transform:skewX(-14deg);
   -moz-transform:skewX(-14deg);
   -ms-transform:skewX(-14deg);
   -o-transform:skewX(-14deg);
   transform:skewX(-14deg);
}

.slanted h2 {
   position:relative;
   z-index:4;
}

.hero1 .slanted {
   width:calc(31%);
   min-width:359px;
}

.hero2 .slanted {
   width:calc(31% - 30px);
   min-width:330px;
}

.hero3 .slanted {
   width:calc(31% - 59px);
   min-width:301px;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="hero hero1"> 
   <div class="slanted"> 
    <h2>Lorem ips</h2> 
   </div> 
  </div> 
  <div class="hero hero2"> 
   <div class="slanted hero-text"> 
    <h2>Lorem ips</h2> 
   </div> 
  </div> 
  <div class="hero hero3"> 
   <div class="slanted hero-text"> 
    <h2>Lorem ips</h2> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials