图像上的聊天气泡

Question

如何使聊天箭头显示图像，以便在箭头的背景中显示图像。图像可以有边圆半径。 就像下图一样。

提前致谢。

.userMsgImage {
    position: relative;
    min-height: 40px;
    margin-left: 20px;
}

.userMsgImage a,
.userMsgImage img {
    border-radius: 4px;
    display: block;
    max-width: 200px;
}

.userMsgImage a img {
    margin-left: 0;
}

.userMsgImage::after,
.userMsgImage::before {
    left: 0px;
    content: "";
    width: 0px;
    position: absolute;
    border-color: transparent transparent transparent rgb(255, 255, 255);
    border-style: solid;
}

.userMsgImage::before {
    top: 0px;
    height: 30px;
    border-width: 0px 0px 40px 40px;
}

.userMsgImage::after {
    top: 12px;
    height: calc(100% - 12px);
    border-width: 40px 0px 0px 40px;
}

<div class="userMsgImage">
<a href="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" target="_blank">
    <img src="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" alt="loading" width="200px">
</a>
</div>

Answer 1

请参阅下面的代码段 - 我添加了几个带有边框和border-radius的绝对定位的<span>元素，以便在左上角和下方生成一个角落效果。

.userMsgImage {
position: relative;
min-height: 40px;
margin-left: 20px;
}

.userMsgImage a,
.userMsgImage img {
border-radius: 4px;
display: block;
max-width: 200px;
}

.userMsgImage a img {
margin-left: 0;
}

.userMsgImage::after,
.userMsgImage::before {
left: 0px;
content: "";
width: 0px;
position: absolute;
border-color: transparent transparent transparent rgb(255, 255, 255);
border-style: solid;
}

.userMsgImage::before {
top: 0px;
height: 30px;
border-width: 0px 0px 40px 40px;
}

.userMsgImage::after {
top: 12px;
height: calc(100% - 12px);
border-width: 40px 0px 0px 40px;
}

.corner-left-top {
    position: absolute;
    left: 36px;
    top: -4px;
    border-top-left-radius: 8px;
    border-left: 4px solid #fff;
    border-top: 4px solid #fff;
    width: 20px;
    height: 20px
}
.corner-left-bot {
    position: absolute;
    left: 36px;
    bottom: -4px;
    border-bottom-left-radius: 8px;
    border-left: 4px solid #fff;
    border-bottom: 4px solid #fff;
    width: 20px;
    height: 20px
}

<div class="userMsgImage">
<a href="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" target="_blank">
<img src="https://images.techhive.com/images/article/2014/05/skype-logo-open-graph-100272883-large.jpg" alt="loading" width="200px">
</a>
    <span class="corner-left-top"></span>
    <span class="corner-left-bot"></span>
</div>