css--画一个带有边框的三角形（类似于QQ的聊天框）

Posted 2020-10-17

使用css画出如下的聊天框：

结构：<div class="chat"></div>

css:

.chat{
      width: 300px; 
      height: 80px; 
      border: 1px solid #ccc; 
      position: relative;
} 

.chat:before{
    content: "";
    position: absolute; 
    left: -10px; 
   top: 34px; 
   border-top: 6px solid transparent; 
   border-bottom: 6px solid transparent; 
   border-right: 10px solid #ccc;
}  

.chat:after{
   content: "";
   position: absolute; 
   left: -8px; 
   top: 34px; 
   border-top: 6px solid transparent; 
   border-bottom: 6px solid transparent; 
   border-right: 10px solid #fff; 
} 

使用:before画出一个深色的三角形，然后使用:after画出一个白色的三角形，两个三角形错开2px。