CSS创建消息箭头

Question

该任务仅使用CSS编码。

我需要在左侧和右侧创建一个带有箭头的聊天框。

附图是右侧的参考。对于左侧，箭头应在左侧。

<div class="message_wrapper"> 
<div class="message"> 
Sample Text Message from User A 
</div> 
</div> 

<div class="message_wrapper right"> 
<div class="message"> 
Sample Text Message from User B 
</div> 
</div> 

https://jsfiddle.net/u0e6yhva/1/

Answer 1

.talk-bubble { 
 
    margin: 40px; 
 
    display: inline-block; 
 
    position: relative; 
 
    width: 200px; 
 
    height: auto; 
 
    background-color: blue; 
 
} 
 

 
.triangle.left-top:after { 
 
    content: ' '; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    left: -20px; 
 
    right: auto; 
 
    top: 0px; 
 
    bottom: auto; 
 
    border: 22px solid; 
 
    border-color: blue transparent transparent transparent; 
 
} 
 

 
.triangle.right-top:before { 
 
    content: ' '; 
 
    position: absolute; 
 
    width: 0; 
 
    height: 0; 
 
    left: auto; 
 
    right: -20px; 
 
    top: 0; 
 
    bottom: auto; 
 
    border: 32px solid; 
 
    border-color: blue transparent transparent transparent; 
 
} 
 

 
.talktext { 
 
    color: white; 
 
    padding: 1em; 
 
}

<div class="talk-bubble triangle left-top"> 
 
    <div class="talktext"> 
 
    <p>Left flush at the top.</p> 
 
    </div> 
 
</div> 
 

 
<div class="talk-bubble triangle right-top"> 
 
    <div class="talktext"> 
 
    <p>Right flush at the top.</p> 
 
    </div> 
 
</div>