微信气泡的图片铺满怎么做的？canvas做出来吗？css呢？

uI给的样式效果图是这样的
图片描述

，我只能做出
图片描述
那个白色的三角，没法把图片弄进去。要么只能四方形的图，能不能跟微信收发图片一样，那个角都被图片铺满呢？

不是要画三角形，是要做出微信展示图片的效果。！
图片描述
求高手！求求求求

css

html5 javascript swift

android

阅读 7.4k

10 个回答

浴火小青春

✓ 已被采纳

提供一个兼容性不高的方法，效果还行，利用css3的clip-path属性和border-radius属性。
代码地址：看这里，其中图片右上端和右下的圆角和左上左下的圆角的半径不一样，是因为被剪切掉了，所以要加大半径来模拟效果。

分割线，不过有个思路，可以用js控制切割的路径，比如说向右边的圆角，那是四分之一弧，可以模拟100个或者更多个点，他们之间的连线就可以大概模拟出一个四分之一弧了。要计算大量的坐标，题主可以试试，我还在试

---------- 好了，更新----------------------------------------------
看效果：点这里
代码主要就是生成polygon函数的参数，polygon是多边形，其中我给那个小三角的位置固定了，没有整成参数。
左上和左下的圆角是用的border-radius生成的，右上角和右下角的是绘制路径剪切而成

/**
 @r {number}  圆角的宽度 
 @x {number}  图片的宽度 
 @y {number}  图片的高度
*/
function makeTopPointPos(r,x,y){
  var angle,rx,ry,a,b,item;var arr=[];
  for(var i=0;i<2000;i++){
      angle=i/1000*Math.PI/2;
      rx=0.95*x-r+r*Math.cos(angle);
      ry=r-r*Math.sin(angle);
      a=rx/x*100+'%';
      b=ry/y*100+'%';
      item=a+' '+b;
      arr.push(item);
  }
  return arr;
}
function makeBottomPointPos(r,x,y){
    var angle,rx,ry,a,b,item;var arr=[];
   for(var i=0;i<2000;i++){
      angle=i/1000*Math.PI/2;
      rx=0.95*x-r+r*Math.sin(angle);
      ry=y-r+r*Math.cos(angle);
      a=rx/x*100+'%';
      b=ry/y*100+'%';
      item=a+' '+b;
      arr.push(item);
   }
   return arr;
}
var topPoints=makeTopPointPos(20,200,200).join(',');
var bottomPoints=makeBottomPointPos(20,200,200).join(',');
function makeParams(r,x,y){
    var rtx=(0.95*x-r)/x*100+'%';
    var rty=r/y*100+'%';
    var rbx=(0.95*x-r)/x*100+'%';
    var rby=(y-r)/y*100+'%';
    var html='(0% 0%,0% 100%,'+rtx+' 100%,'+bottomPoints+', 95% '+rby+',95% 35%,100% 32%,95% 29%,95% '+rty+','+topPoints+','+rtx+' 0%)';
    return html;
}

@沉然静寂题主再来瞅瞅
-------更新-------------------------------
写了篇文章，可以很方便的得出这种气泡图的效果，可以来瞅瞅文章
参考：css-tricks

IF进ELSE退

1.1k15173235

发布于
2016-03-23

canvas做个三角太浪费了，css3能满足你，百度搜下三角！！

guangpunba

5.4k42754

发布于
2016-03-23

没看明白什么意思

lijsh

1.7k217

发布于
2016-03-23

我有个思路，就是那个气泡三角里弄个一样的背景图（就是对话框里那个背景图，如果气泡是伪元素，可能要用border-image），然后算一下背景图位置，也许可以实现拼接效果。

Deboy

49849

发布于
2016-03-23

更新于
2016-03-23

CSS三角

<!DOCTYPE html>
<html>
<head>
    <title>CSS triangle</title>
</head>
<body>
    <div class="triangle">
    </div>
    <style>
        .triangle{
            width: 0;
            height: 0;
            border-top: 50px solid transparent;
            border-right: 100px solid red;
            border-bottom: 50px solid transparent;
        }
    </style>
</body>
</html>

这是一个方向的三角示范其他方向的只要改变border值就可以调出相应的效果

午后一小憩

2.9k32633

发布于
2016-03-23

给你个参考：https://github.com/dupengtao/BubbleTextView

某熊猫桑

16.1k61547

发布于
2016-03-23

更新于
2016-03-23

呃，直接切出来不行么？

我的意思是如果你发图片的对话框都是一样大的话，那么可以把图片放在背景之上，然后在上边覆盖一个内容和背景相同的边框，只要边框和那个斜线背景的图案是对齐的，那按理说应该看起来是比较舒服的一个角吧……

另外你最好把整体的需求列出来吧，不然不知道你要的是啥也不好给意见

沉然静寂

51259

发布于
2016-03-23

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box{
            width: 590px;
            height: 600px;
            margin: auto;
            position: relative;
            background: url("./ban-2.jpg") no-repeat;
            background-position: -30px 0;
        }
        .ico{
            width: 30px;
            height: 30px;
            position: absolute;
            top: 50px;
            left: -30px;
            background: url("./ban-2.jpg") no-repeat;
            background-position: 0 -50px;
            overflow: hidden;
        }
        .ico-bg{
            width: 100%;
            height: 100%;
            position: absolute;
            top: -30px;
            left:-9px;
            transform: rotate(45deg) ;
            border: 30px solid #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="ico"><i class="ico-bg"></i></div>
</div>
</body>

朋友写的效果，觉的可以！

golden_freeman_china

1.8k1211

发布于
2016-03-24

更新于
2016-03-24

html:

<div class="element">
  <div class="content"><img src="xx" /></div >
</div>    
<svg width="0" height="0">
  <defs>
    <clipPath id="clip-shape" clipPathUnits="objectBoundingBox">
      <polygon points="0 1, 0 0, 1 0, 0.8 1" />
    </clipPath>
  </defs>
</svg>

css:

.element{
    position:relative;
    overflow:hidden;
    clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.element .content{
    overflow: hidden;
    color: #fff;
}

PS:如果气泡可变大小或者不是等宽，content大小JS取img宽高；如果气泡等宽，可以设置content宽，并.element .content img{display:block;width:100%;height:auto;}

参考文章：在这里