css制作向下的三角形

向下三角

#app{
   border: 1px blue solid;
    width: 200px;
    height: 100px;
    position: relative;
    border-radius: 5px;
    
   
}
#app::before{
    content: '';
    width: 0;
    height:0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid blue;
    // position: absolute;
    // top: 98px;
    // left: 20px;
    
}
#app::after{
    content: '';
    width: 0;
    height:0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
    // position: absolute;
    // top: 97px;
    // left: 20px;
   
}

聊天框

#app{
   border: 1px blue solid;
    width: 200px;
    height: 100px;
    position: relative;
    border-radius: 5px;
    
   
}
#app::before{
    content: '';
    width: 0;
    height:0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid blue;
    position: absolute;
    top: 98px;
    left: 20px;
    
}
#app::after{
    content: '';
    width: 0;
    height:0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid white;
    position: absolute;
    top: 97px;
    left: 20px;
   
}