css制作tips提示框，气泡框，制作三角形的实现

.triangle{
        border-:20px solid red;
        width:50px;
        height:50px;
        border-right:20px solid blue; 
        border-bottom:20px solid gray; 
        border-left:20px solid green;
   }

.triangle{
        border-:20px solid red;
        width:0px;
        height:0px;
        border-right:20px solid blue; 
        border-bottom:20px solid gray; 
        border-left:20px solid green;
   }

.triangle{
    border-:20px solid transparent;
    width:0px;
    height:0px;
    border-right:20px solid transparent; 
    border-bottom:20px solid gray; 
    border-left:20px solid transparent;
   }

.contaer{
        position:relative;
        marg-:50px;
        paddg:6px 12px;
        color:#fff;
        font-size:16px;
        le-height:25px;
        width:200px;
        height:50px;
        background-color:orange;
        border-radius:4px;    
   }
   p.contaer:after{
        position:absolute;
        :-40px;
        right:20px;
        border-:20px solid transparent;
        content:" "; // content 不要漏了，漏了会显示不出来
        width:0px;
        height:0px;
        border-right:20px solid transparent; 
        border-bottom:20px solid orange; 
        border-left:20px solid transparent;
   }


<p class="contaer">
    hi，这篇文章要教大家怎么使用css制作气泡框。
</p>