css制作向下的三角形

60 阅读1分钟

向下三角

A6741611-3BC7-4365-9908-D2B006504298.png

#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;
   
}

聊天框

85CBF22C-6E4B-4E56-A69D-55B393B82ABA.png

#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;
   
}