效果如下

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：这个例子用来练习定位不错。