起首，微信谈天的时刻气泡图是什么样呢？上图，
，
要完成这类气泡图，要怎样做？
重要的就是完成谁人小三角吗？起首想到的肯定是运用伪元素+定位，对！！！

那我们来试一下，上代码点这里，如许很轻松的完成了想要的背景加小三角的结果

———————–然则——————————————–

像截图中的图片那样，怎样才让小三角里也充溢背景图？

能够由两种完成的体式格局

1. canvas，绘制途径，然后再clip图片,本文暂不形貌

2. 另一种就是应用css3的新属性clip-path属性，绘制出要切割的途径，然后再给clip-path属性赋值,火狐和IE未完成此属性

这里先讲第二种，我们观察到大概有11个症结点，大抵如图

我们能够经由过程组织ploygon多边形函数的参数来到达我们的目标,个中四个圆角是对称的，我们能够之盘算一个圆角的圆弧的坐标就好了，能够经由过程对称的关联再得出其他三段圆弧的坐标。

怎样获得一段圆弧的坐标呢？如许，依据高中数学知识可得，，，我们用无数相相近的点的连线来模仿圆弧，

/**
@param r {number} 圆角半径
@param x {number} 左上圆角圆心x坐标
@param y {number} 左上圆角圆心y坐标
x,y坐标指的是相对于原始图象的位置
*/

function makeTopLeftPos(r,x,y){
  var angle,rx,ry,a,b;var arr=[];item={};
  var len=2000;
  //这里是用2000个点来模仿，能够运用更多的点，但2000结果已很不错了
  for(var i=0;i<len+1;i++){
      angle=i/len*Math.PI/2;
      rx=x-r*Math.sin(angle);
      ry=y-r*Math.cos(angle);
      item.x=rx;
      item.y=ry;
      arr.push({x:rx,y:ry});
  }
  return arr;
}

然后依据对称离别算出其他三个圆角的位置

function makeTopRightPos(){
    var arr=makeTopLeftPos(r,a.x+r,a.y+r);
    var newArr=[];
    var rx,ry;
    for(var i=0,len=arr.length;i<len;i++){
        rx=d.x+a.x-arr[i].x;
        ry=arr[i].y;
        newArr.push({x:rx,y:ry});
    }
    newArr.reverse();
    return newArr;
}
function makeBottomLeftPos(){
    var arr=makeTopLeftPos(r,a.x+r,a.y+r);
    var newArr=[];
    var rx,ry;
    for(var i=0,len=arr.length;i<len;i++){
        ry=c.y+a.y-arr[i].y;
        rx=arr[i].x;
        newArr.push({x:rx,y:ry});
    }
    newArr.reverse();
    return newArr;
}
function makeBottomRightPos(){
    var arr=makeTopRightPos();
    var newArr=[];
    var rx,ry;
    for(var i=0,len=arr.length;i<len;i++){
        ry=c.y+d.y-arr[i].y;
        rx=arr[i].x;
        newArr.push({x:rx,y:ry});
    }
    newArr.reverse();
    return newArr;
}

注重，由于ploygan函数接收的途径是逆时针的，所以我们在获得其他三段圆弧的时刻要注重点的递次，在这里要翻转一下数组，才获得一般的递次。
下面是获得小三角的三个症结点，在这里我默许小三角是等边三角形了，给出三角形极点坐标进行了，其他两点的坐标都在边境上，截图里的5,7两点。
num是在哪条边境上，固然嫌贫苦的话能够经由过程小三角形的坐标局限来剖断小三角是嵌在哪一个边境上，我偷懒了。。

function makeTrigonPos(num){
    var x=p.x;
    var y=p.y;
    var trigonPos=[];
    switch(num){
        case 1: trigonPos=[{x:a.x,y:y-0.577*(a.x-x)},{x:x,y:y},{x:a.x,y:y+0.577*(a.x-x)}];break;
        case 2: trigonPos=[{x:x-0.577*(y-b.y),y:b.y},{x:x,y:y},{x:x+0.577*(y-b.y),y:b.y}];break;
        case 3: trigonPos=[{x:c.x,y:y-0.577*(x-c.x)},{x:x,y:y},{x:c.x,y:y+0.577*(x-c.x)}];break;
        default:
        trigonPos=[{x:c.x,y:y-0.577*(x-c.x)},{x:x,y:y},{x:c.x,y:y+0.577*(x-c.x)}];break;
    }
    var arr=trigonPos.map(function(item){
        return item.x+'px'+' '+item.y+'px';
    });
    return arr;
}

下面就拼接依附polygon函数的参数了

function makeAllParams(){
    var arr1=makeTopLeftPos(r,a.x+r,a.y+r).map(function(item){
        return item.x+'px'+' '+item.y+'px';
    });
    var arr2=makeBottomLeftPos().map(function(item){
        return item.x+'px'+' '+item.y+'px';
    });
    var arr3=makeBottomRightPos().map(function(item){
        return item.x+'px'+' '+item.y+'px';
    });
    var arr4=makeTopRightPos().map(function(item){
        return item.x+'px'+' '+item.y+'px';
    });
    var arr=[arr1,arr2,arr3,arr4];
    arr.splice(num,0,makeTrigonPos(num));
    var params=arr.join(',');
    img.style.webkitClipPath='polygon('+params+')';
}

完全代码：看这里
参考:css-tricks