kuanhsuh
5/18/2017 - 7:16 AM

Skey Block

Skey Block

new_gist_file.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<header>我是header</header>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat maxime ipsa voluptatem, odit, ex omnis ipsum nesciunt rerum velit quo officia sit ullam distinctio tempora et! Nesciunt similique ad, doloremque.</div>
</body>
</html>

body,html {
  padding: 0;
  margin:0;
}
header {
  width: 100%;
  height: 250px;
  background: pink;
  border: 1px solid blue;
}

header:after {
  content: "12121";
  display: block;
  height: 100px;
  width: 100%;
  background: green;
  position: absolute;
  top: 251px;
  left: 0;
  transform: skewY(5deg);
  transform-origin: right;
  border: 1px solid red;
}

.content {
  background: green;
  /* margin-top: 500px; */
  width: 100%;
  height: 400px;
}