<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <div class="container"> <div class="row"> <div class="block -berry edge--bottom"> <h1>Bottom Angled Edge</h1> </div> <div class="block -blue edge--bottom--reverse"> <h1>Bottom Angled Edge</h1> <p>Reversed</p> </div> <div class="block -berry edge--top"> <h1>Top Angled Edge</h1> </div> <div class="block -blue edge--top--reverse"> <h1>Top Angled Edge</h1> <p>Reversed</p> </div> <div class="block -orange edge--both"> <h1>Top & Bottom Angled Edges</h1> </div> <div class="block -green edge--both--reverse"> <h1>Top & Bottom Angled Edges</h1> <p>Reversed</p> </div> </div> </div>

.edge--bottom { position: relative; z-index: 1; } .edge--bottom:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; } .edge--bottom:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; } .edge--bottom--reverse { position: relative; z-index: 1; } .edge--bottom--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; } .edge--bottom--reverse:after { bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 0 100%; transform-origin: 0 100%; } .edge--top { position: relative; z-index: 1; } .edge--top:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; } .edge--top:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .edge--top--reverse { position: relative; z-index: 1; } .edge--top--reverse:before { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; } .edge--top--reverse:before { top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .edge--both { position: relative; z-index: 1; } .edge--both:before, .edge--both:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; } .edge--both:before { top: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 100% 0; transform-origin: 100% 0; } .edge--both:after { bottom: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 100%; transform-origin: 100%; } .edge--both--reverse { position: relative; z-index: 1; } .edge--both--reverse:before, .edge--both--reverse:after { background: inherit; content: ''; display: block; height: 50%; left: 0; position: absolute; right: 0; z-index: -1; -webkit-backface-visibility: hidden; } .edge--both--reverse:before { top: 0; -webkit-transform: skewY(-1.5deg); transform: skewY(-1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .edge--both--reverse:after { bottom: 0; -webkit-transform: skewY(1.5deg); transform: skewY(1.5deg); -webkit-transform-origin: 0 0; transform-origin: 0 0; } .-berry { background: #b52b4a; } .-blue { background: #41ade5; } .-orange { background: #de6628; } .-green { background: #5e9b42; } .block { color: #fff; font-family: 'Fira Sans', sans-serif; margin: 0 0 200px; padding: 20% 20px; text-align: center; } h1 { font-size: 32px; font-weight: 500; } p { font-size: 14px; font-weight: 300; margin-top: 0.5em; }