Border around Pure CSS Triangle+Rectangle

Question

I'm trying to create a shape with pure css, basically a rectangle with an triangle at the bottom, and i partially succeed (the yellow div), however im having trouble displaying a border around the whole div, since i was already using the border attribute to draw the triangle, how can i do this, add a border surrounding the rectangle+triangle div.

 @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
 
 html, body{
  font-family: 'Source Sans Pro', sans-serif;
 }
 
 .step-container{
  text-align: center;
 }
 
 .step-container img{
  vertical-align: middle;
 }
 
 .step{
  background-color: #eee;
  display: inline-block;
  padding: 15px;
  border: 2px solid #999;

 }
 
 .step-production{
  border-radius:50%;
  padding: 40px;
 }

 .step-blender {
  background-color: #FFDE17;
  display: inline-block;
  height: 100px;
  position: relative;
  width: 120px;
  padding-top: 60px;
  margin-bottom: 30px;
 }
 .step-blender:before {
   border-top: 35px solid #FFDE17;;
   border-left: 75px solid transparent;
   border-right: 75px solid transparent;
   content: "";
   height: 0;
   left: 0;
   position: absolute;
   bottom: -36px;
   width: 0px;
 } 
 

 .vertical-line{
  width: 15px; /* Line width */
  background: #000000; /* Old browsers */
  background: linear-gradient(to right, #000000 0%,#777777 36%,#777777 66%,#000000 100%); /* W3C */
  height: 30px; /* Override in-line if you want specific height. */
    margin: 0 auto;
 }

  
 .horizontal-line{
  width: 200px; /* Line width */
  background: #000000; /* Old browsers */
  background: linear-gradient(to bottom, #000000 0%,#777777 36%,#777777 66%,#000000 100%); /* W3C */
  height: 15px; /* Override in-line if you want specific height. */
    margin: 0 auto;
 }

<div class="step-container">
 <div class="step">
  Production Complete
 </div>
 <div class="vertical-line" />
</div>

<div class="step-container">
 <div class="step">
  <img src="/img/icon-lab.svg" style="width: 50px; padding-right: 20px;" /> Lab Analysis
 </div>
 <div class="vertical-line" />
</div>
 
<div class="step-container">
 <div class="step step-production">
  <img src="/img/icon-production.svg" style="width: 60px" />
 </div>
 <div class="vertical-line" />
</div>

<div class="step-container">
 <div class="step step-blender">
  Discharging
 </div>
 <div class="vertical-line" />
</div>

<div class="step-container">
 <div class="step">
  <img src="/img/icon-lab.svg" style="width: 50px; padding-right: 20px;" />  Lab Analysis
 </div>
 <div class="vertical-line" />
</div>

<div class="step-container ">
 <div class="step step-blender">
  <img src="/img/icon-blender.svg" style="width: 60px" />
 </div>
 <div class="vertical-line" />
</div> 

<div class="step-container ">
 <div class="horizontal-line" />
</div>