CodePen

HTML

            
              <ul class="boxes">
  <li>
    1
  </li>
  <li>
    <div class="full">Full content<br />Dynamic</div>
  </li>
  <li>
    3
  </li>
  <li>
    <div class="full">
      <h2>Hello</h2>
      <p>Much more content here for you to look at.</p>
    </div>
  </li>
  <li>
    5
  </li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              ul.boxes {
  display: block;
  list-style: none;
  margin: 4em auto 5em auto;
  padding: 0;
  position: relative;
  width: 10em;
}

ul.boxes > li:nth-of-type(1) { background: #EEE; }
ul.boxes > li:nth-of-type(2) { background: #DDD; }
ul.boxes > li:nth-of-type(3) { background: #CCC; }
ul.boxes > li:nth-of-type(4) { background: #BBB; }
ul.boxes > li:nth-of-type(5) { background: #AAA; }

ul.boxes > li {
  display: block;
  margin: 0;
  padding: 1px 1em 4em 1em;
  position: relative;
  z-index: 1;
}

ul.boxes > li:last-child {
  padding-bottom: 1em;
}

ul.boxes > li:before,
ul.boxes > li:last-child:after {
  background: inherit;
  content: '';
  height: 100%;
  left: 0;
  padding: 1em 0;
  position: absolute;
  top: -2em;
  -webkit-transform: skewY(-15deg);
  transform: skewY(-15deg);
  z-index: -1;
  width: 100%;
}

ul.boxes > li:last-child:after {
  bottom: -3em;
  top: auto;
  -webkit-transform: skewY(15deg);
  transform: skewY(15deg);
}

ul.boxes div.full {
  border: 2px dashed rgba(0, 0, 0, .2);
  padding: .5em;
  text-align: center;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................