实现微信聊天的尖角图片样式

Posted nightfallsad

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了实现微信聊天的尖角图片样式相关的知识,希望对你有一定的参考价值。

参考连接 http://www.jianshu.com/p/f77f54720202,不过我感觉他这里实现的不是很完美,因为三角是继承的整个图片,所以做了一些更改

效果如下,哈哈在safari里一放大明显能看出来怎么弄的,不过下面两种方式兼容性都不好,最好让UI出图扣出这个效果

第一种实现方式

如上图,方式是一个透明三角和两个矩形去覆盖图片右侧内容,不过这样会是原本图片右侧的两个border-radius失效,然后再弄两个圆弧盖住右上角和右下角。。感觉有点傻,在android上还有兼容性问题,代码如下,效果如下图

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 .container{
 7     height: 100px;
 8     float: left;
 9     position: relative;
10 }
11 .container img{
12     height: 100px;
13     border-radius: 6px;
14 }
15 .container:after{
16     content: \'\'; 
17     position: absolute; 
18     top: 24px; 
19     right: -14px;
20     border: solid #fff; 
21     border-width: 14px; 
22     border-left-color: transparent; 
23     background: inherit; 
24     background-size: auto; 
25     background-clip: border-box; 
26     background-origin: border-box;
27 }
28 .container .top{
29     width: 14px;
30     height: 24px;
31     position: absolute;
32     top: 0;
33     right: 0;
34     background: #fff;
35 }
36 .container .bottom{
37     position: absolute;
38     width: 14px;
39     height: 62px;
40     top: 52px;
41     right: 0;
42     background: #fff;
43 }
44 .container .top_left_circle{
45     width: 12px;
46     height: 12px;
47     background-color: transparent;
48     border-radius: 50%;
49     border-left: 6px solid transparent;
50     border-right: 6px solid transparent;
51     border-bottom: 6px solid transparent;
52     border-top: 6px solid #fff;
53     position: absolute;
54     top: -6px;
55     right: 8px;
56     transform: rotate(45deg);
57 }
58 .container .bottom_left_circle{
59     width: 12px;
60     height: 12px;
61     background-color: transparent;
62     border-radius: 50%;
63     border-left: 6px solid transparent;
64     border-right: 6px solid transparent;
65     border-bottom: 6px solid #fff;
66     border-top: 6px solid transparent;
67     position: absolute;
68     bottom: -6px;
69     right: 8px;
70     transform: rotate(-45deg);
71 }
72 </style>
73 </head>
74 <body>
75 <div class="container">
76     <img src="http://pic136.nipic.com/file/20170727/18708972_230433430000_2.jpg">
77     <div class="top_left_circle"></div>
78     <div class="top"></div>
79     <div class="bottom_left_circle"></div>
80     <div class="bottom"></div>
81 </div>
82 </body>
83 </html>

然后,就想到了第二种实现方式,

这种方式是放左右两个图片,左边图片有div容器负责border-radius,并且左边图片把右边(三角形高度的)宽度隐藏;右边图片定位到右侧并剪切成(三角形底边的宽,三角形高的长)的矩形,见到那来说就是将两张图片拼成原来的图片,然后裁剪和用三角形遮盖。
这里不用裁剪也行可以把右侧的图片也加div容器,不过好像会麻烦点,图片如下,代码如下

两张图片拼成原图

右侧图片裁剪

三角形覆盖

 

 

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="utf-8">
 5 <style>
 6 body{
 7     padding: 20px;
 8 }
 9 .container{
10     height: 100px;
11     float: left;
12     position: relative;
13 }
14 .container img{
15     height: 100px;
16 }
17 .container:after{
18     content: \'\'; 
19     position: absolute; 
20     top: 24px; 
21     right: -14px;
22     border: solid #fff; 
23     border-width: 14px; 
24     border-left-color: transparent; 
25     background: inherit; 
26     background-size: auto; 
27     background-clip: border-box; 
28     background-origin: border-box;
29 }
30 .container .leftDiv{
31     border-radius: 6px;
32     overflow: hidden;
33     height: 100px;
34     width: 129px;
35     margin-right: 14px;
36 }
37 .container .rightImg{
38     -webkit-clip-path: inset(24px 0 48px 128px);
39     clip-path: inset(24px 0 48px 128px);
40     position: absolute;
41     right: 0;
42     top: 0;
43 }
44 </style>
45 </head>
46 <body>
47 <div class="container">
48     <div class="leftDiv">
49         <img src="http://pic136.nipic.com/file/20170727/18708972_230433430000_2.jpg">
50     </div>
51     <img class="rightImg" src="http://pic136.nipic.com/file/20170727/18708972_230433430000_2.jpg">
52 </div>
53 </body>
54 </html>

 

以上是关于实现微信聊天的尖角图片样式的主要内容,如果未能解决你的问题,请参考以下文章

Android 仿微信聊天图片

css 实现div 4个角尖角边框样式

css 实现div 4个角尖角边框样式

css 实现div 4个角尖角边框样式

微信小程序-模仿绘制聊天界面

高仿微信聊天界面长按弹框样式