Single Slant CSS3 Divs - ("Responsive Razorblade Rectangles")

index.html

<div class="rr rr-left">
  <div>
    <h2>rr-left div</h2>
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
  </div>
</div>
<div class="rr rr-right">
  <div>
    <h2>rr-right div</h2>
    <p>Lorem ipsum dolor sit amet, dolore eu feugiat nulla facilisis.</p>
  </div>
</div>

style.scss

/*==========  Variables  ==========*/

$pg-bg:             #dcdcdc;
$rr-bg:             #232E39;
$rr-bg-hover:       darken($rr-bg, 10%);

$rr-height:         200px;
$rr-slant:          100px;
$rr-gutter:         1%;
$rr-width:          50%;


/*==========  Styles  ==========*/

// Scaffolding
body {
  background-color: $pg-bg;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 300;
  color: lighten($rr-bg, 40%);
}
h2 { text-transform: uppercase; }
.rr > div { text-align: center; }

// Construct the rectangles
.rr {
  position: relative;
  height: $rr-height;
  background: $rr-bg;
  &.rr-left {
    z-index: 1;
    float: left;
    width: $rr-width + 5%; // + 5% adjustment for slant offset
  }
  &.rr-right {
    z-index: 2;
    float: right;
    width: $rr-width - $rr-gutter - 5%; // - 5% adjustment for slant offset
  }
}

// Add slanted edges
.rr:after,
.rr:before {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
}
.rr-left:after {
  right: 0;
  border-left: $rr-slant solid $rr-bg;
  border-bottom: $rr-height solid $pg-bg;
}
.rr-right:before {
  left: -$rr-slant;
  border-right: $rr-slant solid $rr-bg;
  border-top: $rr-height solid rgba(0, 0, 0, 0); // overlaps .rr-left
}

// Add padding around inner content
.rr-left > div {
  margin-right: $rr-slant;
  margin-left: $rr-slant/2;
}
.rr-right > div {
  margin-right: $rr-slant/2;
  margin-left: $rr-slant/4;
}

// Hover styles
.rr:hover { background: $rr-bg-hover; }
.rr-left:hover:after { border-left-color: $rr-bg-hover; }
.rr-right:hover:before { border-right-color: $rr-bg-hover; }

Symantic-No-Skew-Single-Slant-CSS3-"Razorblade-Rectangles".markdown

Single Slant CSS3 Divs - ("Responsive Razorblade Rectangles")

=============================================================== Fully responsive and cross-browser compatible rectangles with slanted edges using pseudo-elements (as supposed to the "skew" transform). In contrast with the skew alternative, the method employed does not cause the rectangles' skewed sides to affect containing elements (such as text), and has minimal impact on surrounding elements in terms of positioning. The code affords full use of other CSS3 styling techniques for additional customization, such as CSS styling, hover states, transitions, etc.

Free for all developers to use and pass along - share the <3

See it in action at TacoBarCompany.com.

To-Do:

• Accommodate variable height based on content inside the rectangles
• Write SASS mixin for improved logic behind angle of slanted edges
• Extend capability for more than two rectangles
• Fix cross-browser compatability issues
• Convert CSS to SCSS

Notes:

@author    Daniel McClintock <[email protected]>
@uri       http://about.me/McClintock
@license   http://www.opensource.org/licenses/mit-license.html
@version   0.2.1
@created   08/28/13
@updated   01/20/15

A Pen by danielsmcclintock on CodePen