纯css画三角形及气泡样式的简单画法

• 在做项目的过程中，遇到了要写一个气泡的样式，先布局了矩形部分，但小三角形的旗气泡遇到一点困难。后来梳理了一下，以此记录。
• 首先是三角形的画法：三角形的原理就是矩形，然后分成四个三角形，一般使用border来画一个三角形，如下图所示，我们给一个形状设置border属性时，一般是一下这种样式，如果我们不要里面的矩形，也就是里面的部分width和height都设置为0，那么只剩下border的宽度，形成图2这种形式
  
  图2：
  
• 四个border可以形成一个矩形，然后就可以根据设置不同的border画出我们想要的三角形了。通过给三角形设置不同的位置，就可以画出我们想要的气泡，画一个具体的气泡形式的代码如下：

    
    
    
    
    


    

      
        

        三角形朝下
        
 
        
    
    
    

气泡朝下的形式如图所示：