Looking to add a unique touch with a "chat bubble" design on my webpage. Below is the code I have so far, but I seem to be facing issues with getting the triangle shape to display.
Any suggestions on what might be causing this problem?
.playernamechat.self-message {
width: auto;
background-color: blue;
border-radius: 12px;
padding: 5px 10px;
margin-left: 5px;
display: inline-block;
max-width: 280px;
overflow: hidden;
float: left;
position: relative;
color: white;
}
.self-message::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
<span class="playernamechat self-message">hello</span>