Css / Styled Cutting a div as a ballon question - css

Question

Hello i'm trying to do like an arrow from a question balloon:
code:
<Styled.MessageWrapper user={message.user}>
<Styled.BotImg src={BotLogo} user={message.user} />
<Styled.ChatMessage user={message.user}>
{message.text}
</Styled.ChatMessage>
</Styled.MessageWrapper>
css:
const MessageWrapper = styled.div`
display: flex;
align-items: center;
justify-content: ${props => (props.user ? 'flex-end' : 'flex-start')};
`;
const BotImg = styled.img`
display: ${props => (props.user ? 'none' : 'block')};
padding-left: 10px;
width: 40px;
`;
const ChatMessage = styled.div`
margin: 1ex;
padding: 1ex;
border-radius: 2px;
${props => (props.user ? messageClient : messageBot)}
`;
now i have this:
i trying make this but not sucess:

Answer 1

Unfortunately, I don't know anything about styled components. However, this solution with just HTML and CSS might help demonstrate how to leverage the technique already recommended by #BugsArePeopleToo.
.messages {
max-width: 400px;
margin: 0 auto;
}
.message {
margin: 0.5em;
}
.message.tx {
text-align: right;
}
.message .bubble {
position: relative;
display: inline-block;
vertical-align: top;
background: #0D47A1;
color: #fff;
padding: 0.5em 1em;
border-radius: 0.5em;
}
.message.rx .bubble {
background: #CFD8DC;
color: #212121;
}
.message .icon {
display: inline-block;
width: 2em;
height: 2em;
margin-right: 0.5em;
border-radius: 1em;
background: #CFD8DC;
}
.bubble.l-caret::before,
.bubble.r-caret::before {
position: absolute;
display: block;
content: '';
top: 0;
width: 0;
height: 0;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 0.5em solid #0D47A1;
}
.message.rx .bubble.l-caret::before,
.message.rx .bubble.r-caret::before {
border-top: 0.5em solid #CFD8DC;
}
.bubble.l-caret::before {
left: -0.5em;
}
.bubble.r-caret::before {
right: -0.5em;
}
<div class="messages">
<div class="message rx">
<span class="icon"> </span>
<span class="bubble l-caret">
test 123 hello world <br>
multiline
</span>
</div>
<div class="message tx">
<span class="bubble r-caret">
ohai
</span>
</div>
</div>

Answer 2

You need a pseudo element on your ChatMessage component.
The syntax for styled components is:
const ChatMessage = styled.div`
position: relative;
&:before {
position: absolute;
/* additional pseudo element styles here */
}
`;
As for the styles of the arrow, you need relative/absolute positioning, and use the transparent border trick to get a triangle. Here is anther question on SO that explains this technique very well, just adjust the positioning, dimensions, color, border, etc to your liking: Speech bubble with arrow