纯css简单实现一个带颜色的三角形，带小三角形箭头的对话框

做前端的小伙伴经常会在项目中遇到需要实现三角形或者带三角形对话框的地方，很多的实现方法是将三角形小图标给切成图片，然后再用定位的方法把三角形跟对话框拼接在一起。

用css写三角形的方法很简单： 20px 可以设置三角形的宽高，大小可控制；    三角的尖角要指向哪边，相反方向设置你所需要的颜色即可，其余方向设置 transparent 透明。

html:     

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:

审核人员：

陈晓光

审核日期：

2019-08-08 12:63

审核建议：

短视的骄傲大萨达电盾科技路口肯定是接口来啥框架的了

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