<div class="container">
  <h1 class="intro">Cutting Corners with CSS</h1>
  <ul class="blocks blocks_4up">
    <li>
      <div class="cut">
        <div class="cut-bd cut-bd_red">
          <div class="cut-hd cut-hd_red">
            <h3 class="hdg">Sometimes...</h3>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
        </div>
      </div>
    </li>
    <li>
      <div class="cut">
        <div class="cut-bd cut-bd_red">
          <div class="cut-hd cut-hd_red">
            <h3 class="hdg">I..</h3>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
        </div>
      </div>
    </li>
     <li>
      <div class="cut">
        <div class="cut-bd cut-bd_red">
          <div class="cut-hd cut-hd_red">
            <h3 class="hdg">Cut....</h3>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
        </div>
      </div>
    </li>
     <li>
      <div class="cut">
        <div class="cut-bd cut-bd_red">
          <div class="cut-hd cut-hd_red">
            <h3 class="hdg">Corners!</h3>
          </div>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
        </div>
      </div>
    </li>   
  </ul>
  <div class="cut">
    <div class="cut-bd cut-bd_green">
      <div class="cut-hd cut-hd_green">
        <h3 class="hdg">P.S. - I'm loving flat colors at the moment!</h3>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque quasi velit laudantium totam consequatur aliquam possimus quidem ullam esse nemo excepturi alia.</p>
    </div>
  </div>  
</div>

@import "compass/css3";

@import "compass/reset";
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);

body {
  background: #34495e;
  font-size: 100%;
  line-height: 1.3;
  font-family: 'Source Sans Pro', sans-serif;
}

.container {
  max-width: 960px;
  margin: 75px auto;
  > * + * {
    margin-top: 25px;
  }
}

.blocks {
  margin-left: -2%;
  &:before, &:after {
    content: "";
    display: table;
  }
  &:after {
    content: "";
    clear: both;
  }
}

.blocks > * {
  float: left;
  margin-left: 2%;
}

.blocks_4up > * { width: 23%; }

.cut {
  overflow: hidden;
  padding: 0 0 30px;
}

.cut-bd {
  padding: 15px 15px 0;
  position: relative;
}

.cut-hd {
  margin: 0 0 5px;
  padding: 0 0 5px;
}

.cut-hd_red { border-bottom: 1px solid darken(#e74c3c,5%); }
.cut-hd_green { border-bottom: 1px solid darken(#1abc9c,5%); }

.cut-bd_red {
  border-top: 5px solid #f39c12;
  background: #e74c3c;
  color: #ecf0f1;
  text-shadow: 1px 1px rgba(#ffffff,.2);
  &:before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    top: 100%;
    right: 30px;
    background: #e74c3c;
  }
  &:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: -30px;
    position: absolute;
    top: 100%;
    left: 100%;
    border: 15px solid #e74c3c;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
}

.cut-bd_green {
  border-top: 5px solid #ecf0f1;
  background: #1abc9c;
  color: #ecf0f1;
  text-shadow: 1px 1px rgba(#ffffff,.2);
  &:before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    top: 100%;
    right: 30px;
    background: #1abc9c;
  }
  &:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: -30px;
    position: absolute;
    top: 100%;
    left: 100%;
    border: 15px solid #1abc9c;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
}

.intro {
  color: #ecf0f1;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 3px 3px rgba(darken(#2c3e50,5%),1);
}

.hdg {
  color: #ffff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}