新浪微博的Tips框。

主要内容有：

第一，定义header里面两个“◆”，通过在header中margin进行定位，构成上图中的凸角

第二，控制下面的内容div，向上移动，使用header中构成的凸角覆盖内容边框。

挺犀利滴啊-啊a-

.box{
	background:white;
	width:300px;
}
.box .box_h{
	margin-top:-8px;
	padding-left:18px;
	line-height: 20px;
	font-family: "SimSun";
	overflow: hidden;
	display: block;
	height: 7px;
}
.box .box_h .inner,.box .box_h .outter{
	font-family: "SimSun";
	overflow: hidden;
	display: block;
	height: 9px;
	line-height: 17px;
}
.box .box_h .inner{
	color: #232323;
	margin-top:-8px;
}
.box .box_h .outter{
	color:#383838;
	font-style:normal;
}
.box  .box_c{
	margin-top:-1px;
	padding:4px 8px;
	border:1px solid #383838;
	border-radius:3px;
	background:#232323;
	color:#5A5A5A;
}

<div class="box">
	<div class="box_h">
		<em class="outter">◆</em> 
		<span class="inner">◆</span> 
	</div>
	<div class="box_c">
		这里有点点内容，你可以游荡游荡
	</div>
</div>