常用情况，如下图
图片.png
图片.png
CSS代码
.we-chat-info::after{
position: absolute;
top: 109px;
right: -8px;
content: '';
display: inline-block;
border-top: 9px solid transparent;
border-bottom: 9px solid transparent;
border-left: 9px solid white;
}
CSS原理解析
1、当我们把border设置为
.we-chat-info::after{
position: absolute;
top: 109px;
right: -8px;
content: '';
display: inline-block;
border-top: 20px solid red;
border-bottom: 20px solid rebeccapurple;
border-left: 20px solid rosybrown;
border-right: 20px solid royalblue;
}
可以看到如下图所示
图片1.png
2、当我们把border设置为
.we-chat-info::after{
position: absolute;
top: 109px;
right: -8px;
content: '';
display: inline-block;
border-top: 20px solid red;
border-bottom: 20px solid rebeccapurple;
border-left: 20px solid rosybrown;
}
可以看到如下图所示
图片2.png
