效果如下
image.png
基本思路
1首先你得会话三角形，这个对新手还是挺难的。利用border属性、
2 画矩形，这个简单。
3 把矩形和三角形摆好位置。这个就考到定位了，一般就用absolute.定位。
4还得会做一点计算。如下三角形是40*40px。因此矩形偏离上侧的距离为（40-10）/2=15px；
image.png
<style>
span {
height:40px;
width:40px;
display:block;
position: relative;
}
.demo::before {
content:"";
width:0;
height:0;
display:block;
border-top:20px solid transparent;
border-left: 20px solid red;
border-right:20px solid transparent;
border-bottom: 20px solid transparent;/* make a triangle*/
position: absolute;
left:40px;
}
.demo::after {
content:"";
width:40px;
height:10px;
display:block;
background: red;/*make a rect*/
position: absolute;
left:0px;
top:15px;/*(40-10)/2=15px*/
}
</style>
<span class="demo">
</span>
ps：这个例子用来练习定位不错。
