CSS border画图

百度前端面试题中的一道,之前一直不知道怎么做.请教了下前端的朋友，然后了解到是由border画的图

最大的困惑是最右边是怎么做到的，查了资料才知道是画出三角形叠加得到的。实际上并不是画出三角形，只是将正方形其他的三部分隐藏掉。点击打开链接（具体实现三角形）

在自己的实践中发现<span>的属性要做到font-size:0才能成功体现出三角形，否则只有上下是三角形，左右是梯形

body{
	padding: 0px;
	margin:0px;
}
.box{
	width:300px; 
	padding:30px 20px; 
	border:5px solid #beceeb; 
	position:relative;
}
.box span{
	font-size:0;
	width:0;
	height:0;
	border-width: 20px;
	position: relative;
	bottom: 10px;
}
.box span.bottom{
	border-style:solid dashed dashed;
	border-color:transparent transparent transparent #beceeb ; 
	left:320px;
}
.box span.top{
	border-style:solid dashed dashed;
	border-color:transparent transparent transparent #ffffff; 
	left:270px;
}

<div class="box">
		<span class="bottom"></span>
		<span class="top"></span>
</div>

最后的效果