纯CSS三角形+矩形边框

Question

我试图创建一个纯css的形状，基本上是一个底部有三角形的矩形，我部分成功（黄色div），但是我在整个div周围显示边框时遇到了麻烦，因为我已经使用border属性绘制三角形，我该怎么做，添加一个围绕矩形+三角形div的边框。

＆＃13;

＆＃13;

	@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;
	}

＆＃13;

<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>	

＆＃13;

＆＃13;

＆＃13;