<code><style type="text/css">
p{text-align: center;}
#outsetbox{height:150px;background:#2b2b2b;padding-top: 15px;}

#insetbox{width:400px;height:120px;margin:15px auto;background:#fff;position: relative;}

span.top{border-style: outset solid;border-width: 0px 10px 10px 10px;border-top-color: rgba(0, 0, 0, 0)!important;border-bottom-color:#fff!important;height: 0;color:  rgba(0, 0, 0, 0)!important;display:block;position:absolute;top:-10px;left:140px;}

span.right {border-style: outset solid;border-width: 10px 0px 10px 10px;border-top-color: rgba(0, 0, 0, 0)!important;border-bottom-color: rgba(0, 0, 0, 0)!important;height: 0;color: #FFF;display:block;position:absolute;right:-10px;top:50%}

span.left{border-style: outset solid;border-width: 10px 10px 10px 0px;border-top-color: rgba(0, 0, 0, 0)!important;border-bottom-color: rgba(0, 0, 0, 0)!important;height: 0;color: #FFF;display:block;position:absolute;left:-10px;top:20px;}

span.bottom{border-style: outset solid;border-width: 10px 10px 10px 10px;border-top-color:#fff!important;border-bottom-color:rgba(0, 0, 0, 0)!important;height: 0;color:  rgba(0, 0, 0, 0)!important;display:block;position:absolute;bottom:-20px;right:50%}

</style>
<div id="outsetbox">
    <div id="insetbox">
    <span class="top"></span>
    <span class="right"></span>
    <span class="bottom"></span>
    <span class="left"></span>
    <p>yefengs</p>
    </div>
</div></code>