<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <header> <div class="container"> <h1>Site Name</h1> </div> </heeader> <div class="container"> <div class="row 1"> <div class="col-md-3"> <div class="block"></div> </div> <div class="col-md-6"> <div class="block a2"></div> </div> <div class="col-md-3"> <div class="block a4"></div> </div> </div> <div class="row 2"> <div class="col-md-12"> <div class="block"></div> </div> </div> <div class="row 3"> <div class="col-md-3"> <div class="blockb b"></div> </div> <div class="col-md-3"> <div class="blockb b2"></div> </div> <div class="col-md-3"> <div class="blockb b3"></div> </div> <div class="col-md-3"> <div class="blockb b4"></div> </div> </div> <div class="row 4"> <div class="col-md-3"> <div class="blockb b"></div> </div> <div class="col-md-3"> <div class="blockb b2"></div> </div> <div class="col-md-3"> <div class="blockb b3"></div> </div> <div class="col-md-3"> <div class="blockb b4"></div> </div> </div> </div>

body{ margin: 0; background:#E0E2E0; } .row { margin-top:20px; } .block{ height: 200px; width: 100%; position: relative; background: red; } .block:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: right bottom; transform: skewY(-2deg); } .block.a2:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: center bottom; transform: skewY(0deg); } .block.a3:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY(0deg); } .block.a4:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left bottom; transform: skewY(2deg); } .blockb{ height: 200px; width: 100%; position: relative; background: green ; margin-top:30px; } .blockb.b:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: right top; transform: skewY(2deg); } .blockb.b2:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: right top; transform: skewY(0deg); } .blockb.b3:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left top; transform: skewY(0deg); } .blockb.b4:after{ content: ''; width: 100%; height: 100%; position: absolute; background: inherit; z-index: -1; bottom: 0; transform-origin: left top; transform: skewY(-3deg); } .block:hover, .blockb:hover { border-color:yellow; }