Anvil Roles - Styling a chat bubble

Anvil Q&A
1

I want to take a label and attach an svg of a tail to it so that it appears to be a chat bubble.

I have tried this on both a textbox and label. I have created and applied roles. Here is my css roles:

.anvil-role-user_label {
  display: flex;
  width: 457px;
  height: 82px;
  flex-direction: column;
  align-items: flex-start;
  gap: 3.223px;
  flex-shrink: 0;
  background: #278EFF;
  color: white;
  margin-left: auto; 
  position: relative; 
  justify-content: flex-end; 
  border-radius: 8px; 
  position: relative; 
  border-radius: 8px; 
}

.anvil-role-user_label::after {
  content: '';
  position: absolute;
  right: -100px; 
  bottom: 0;
  width: 20px; 
  height: 20px; 
  background-image: url('_/theme/user_message_tail.svg');
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1; 
}
2

You haven’t said what’s not working as you expected. It may also be helpful to share a clone link to your attempt so we can see the other aspects of how you’re applying the roles.

FYI, though, there’s something similar already at Hangouts-like Chat Design

p.s. Welcome to the forum! :wave: