Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body>
​
    <div class="wrapper">
      <header>
        <h1>Hello World</h1>
      </header>
    </div>
​
    <div class="search">
      <h2>Search</h2>
    </div>
​
  </body>
</html>
 
* {
  margin: 0;
  padding: 0;
}
​
body {
  background-color: #fff;
}
​
h1, h2 {
  text-transform: uppercase;
  font-size: 6vw;
}
​
h2 {
  font-size: 4vw;
}
​
.wrapper {
  overflow: hidden;
}
​
header {
  background-color: gold;
  height: 40vw;
  line-height: 40vw;
  
  -webkit-transform: skewY(10deg);
  -ms-transform: skewY(10deg);
  -o-transform: skewY(10deg);
  transform: skewY(10deg);
  
  -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 -.7em 1em -0.7em rgba(0,0,0,0.5);
  box-shadow: inset 0 -.7em 1em -0.7em rgba(0,0,0,0.5);
}
​
header h1 {
  -webkit-transform: skewY(-10deg);
  -ms-transform: skewY(-10deg);
  -o-transform: skewY(-10deg);
  transform: skewY(-10deg);  
  padding-left: 1em;
  color: white;
}
​
.search {
  background-color: lightgray;
  padding: 1em;
  margin: 0 1em;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
qolamipro
0viewers