效果如下
image.png
基本思路
1首先你得會話三角形栈幸，這個對新手還是挺難的。利用border屬性帮辟、
2 畫矩形速址，這個簡單。
3 把矩形和三角形擺好位置由驹。這個就考到定位了芍锚，一般就用absolute.定位。
4還得會做一點計算蔓榄。如下三角形是40*40px并炮。因此矩形偏離上側(cè)的距離為（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：這個例子用來練習(xí)定位不錯甥郑。
