chat bubble on image

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

コードスニペットの下を参照してください - 私は、左上の角の影響を与えることを国境と国境半径との絶対位置<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>