2017-07-14 131 views
-1

該任務僅使用CSS編碼。CSS創建消息箭頭

我需要在左側和右側創建一個帶有箭頭的聊天框。

附圖是右側的參考。對於左側,箭頭應在左側。

enter image description here

<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/

+0

使用':after'和':before'僞。 – Jer

+0

酷炫任務。你有什麼嘗試? – sol

+0

如何在內容中獲得斜線(對角線) –

回答

0

.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>

+0

完美。謝謝。 –