Hie guys,
I’m trying to build a chat screen that includes some nice looking chat bubbles I made in figma. Problem is… I haven’t the slightest clue on how to implement it in weweb. I tried custom css copied from figma into weweb but that didn’t work out.
Hi, in pure css it would probably require using pseudo class but we can’t yet in WeWeb.
What you can do instead is using two div, one for the main content and another one for the the little corner. You can make it a component so you can reuse your custom bubble everywhere and even make a prop to choose where it appear for exemple.
You can make this happen by using another div, with position absolute as Alexis mentioned. Then you just put the settings with your div, containing the triangle, to be top: 100% and left or right: 0, depending on the kind of bubble sent or recieved. After that you can with states (turn on the “apply to children”) handle the visibility and colors of the bubbles and triangle pieces.
2 Likes
Thank you @Broberto this really helps 
1 Like