Skip to content

Instantly share code, notes, and snippets.

@leandroh

leandroh/index.html

Created June 13, 2014 20:18
Show Gist options
  • Save leandroh/e6c394c87872f171beba to your computer and use it in GitHub Desktop.
Save leandroh/e6c394c87872f171beba to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 2d transforms
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>html 5 minimal skeleton</title>
<style type="text/css">
body {
padding: 40px;
}
.left-side-0 {
float: left;
width: 80px;
height: 200px;
background: #E44D26;
transform: skew(0, 20deg);
-webkit-transform: skew(0, 20deg);
}
.left-side-1 {
float: left;
width: 80px;
height: 200px;
background: #F16529;
transform: skew(0deg, -20deg);
-webkit-transform: skew(0, -20deg);
}
.right-side-0 {
float: left;
width: 80px;
height: 200px;
background: #E44D26;
transform: skew(0, 20deg);
-webkit-transform: skew(0, 20deg);
}
.right-side-1 {
float: left;
width: 80px;
height: 200px;
background: #F16529;
transform: skew(0, -20deg);
-webkit-transform: skew(0, -20deg);
}
</style>
</head>
<body>
<div class="left-side-0"></div>
<div class="left-side-1"></div>
<div class="right-side-0"></div>
<div class="right-side-1"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment