做前端的小伙伴经常会在项目中遇到需要实现三角形或者带三角形对话框的地方，很多的实现方法是将三角形小图标给切成图片，然后再用定位的方法把三角形跟对话框拼接在一起。
用css写三角形的方法很简单： 20px 可以设置三角形的宽高，大小可控制； 三角的尖角要指向哪边，相反方向设置你所需要的颜色即可，其余方向设置 transparent 透明。
html: <div class='sjx'></div>
css: .sjx{ display: inline-block; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid transparent; border-right: 20px solid red;}
例子：
效果图：
代码：
html:
<div class="col-sm-10 m-l-lg sh-info m-t-sm">
<form class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-4 control-label font-bold">审核人员：</label>
<label class="col-sm-8 control-label text-left">陈晓光</label>
</div>
<div class="form-group">
<label class="col-sm-4 control-label font-bold">审核日期：</label>
<label class="col-sm-8 control-label text-left">2019-08-08 12:63</label>
</div>
<div class="form-group">
<label class="col-sm-4 control-label font-bold">审核建议：</label>
<label class="col-sm-8 control-label text-left">短视的骄傲大萨达电盾科技路口肯定是接口来啥框架的了</label>
</div>
</form>
</div>
css:
.sh-info {border:1px solid #e8e8e8;border-radius:10px;position:relative;display:inline-block;padding:4px 8px;background-color:#f1f1f1; }
.sh-info:before {position:absolute;left:4px;top: -24px;content:'';border-top:12px solid transparent;border-bottom:12px solid #f1f1f1;
border-left:8px solid transparent;border-right:8px solid transparent; }
