Creating skewed div at 100% width - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Div

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

Description

Creating skewed div at 100% width

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <title>Lorem ipsum dolor sit amet, consectetur adipi</title> 
  <style>
.box {<!--from   w  w  w. j  av a  2s .  com-->
   background-color:Chartreuse;
   margin-top:41px;
   padding:2% 21px;
   -webkit-transform:skewY(-6deg);
   -moz-transform:skewY(-6deg);
   -ms-transform:skewY(-6deg);
   -o-transform:skewY(-6deg);
   transform:skewY(-6deg);
}

.box>.wrapper {
   -webkit-transform:skewY(6deg);
   -moz-transform:skewY(6deg);
   -ms-transform:skewY(6deg);
   -o-transform:skewY(6deg);
   transform:skewY(6deg);
}
</style> 
 </head> 
 <body> 
  <div class="box"> 
   <div class="wrapper"> 
    <h1>Lorem ipsum dolor</h1> 
    <p>Lorem ipsum dolor sit</p> 
    <p>Lorem ipsum dolor sit amet, con</p> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials