Creating a angled shape with CSS3 - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Shape

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

Description

Creating a angled shape with CSS3

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>
* {<!--from  ww  w .  j  a va  2 s  .  c o  m-->
   margin:0;
   padding:0;
}

body {
   background-color:Chartreuse;
}

h1, h2 {
   text-transform:uppercase;
   font-size:7vw;
}

h2 {
   font-size:5vw;
}

.wrapper {
   overflow:hidden;
}

header {
   background-color:yellow;
   height:41vw;
   line-height:41vw;
   -webkit-transform:skewY(11deg);
   -ms-transform:skewY(11deg);
   -o-transform:skewY(11deg);
   transform:skewY(11deg);
   -webkit-transform-origin:100% 0;
   -moz-transform-origin:100% 0;
   -ms-transform-origin:100% 0;
   -o-transform-origin:100% 0;
   transform-origin:100% 0;
   -webkit-box-shadow:inset 0 -.8em 2em -0.8em blue;
   box-shadow:inset 0 -.8em 2em -0.8em pink;
}

header h1 {
   -webkit-transform:skewY(-11deg);
   -ms-transform:skewY(-11deg);
   -o-transform:skewY(-11deg);
   transform:skewY(-11deg);
   padding-left:2em;
   color:OrangeRed;
}

.search {
   background-color:grey;
   padding:2em;
   margin:0 2em;
}
</style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <header> 
    <h1>Lorem ipsum</h1> 
   </header> 
  </div> 
  <div class="search"> 
   <h2>Lorem </h2> 
  </div>  
 </body>
</html>

Related Tutorials