▼
Streaming live at 10am (PST)

Making talk bubble with directional arrow

Design help General
#1

Hi everyone,

This is my first forum post. I’m excited to have my first technical question!

I am designing - let’s call it, for simplicity’s sake - an online comic book. I need to add the speech bubbles, which should appear to come from the speaker. I have seen posts online about creating arrows using pseudo-classes (e.g., :before, :after). However, I don’t believe that pseudo-classes are supported on Webflow.

First question, can this “arrow” be created using Webflow styling alone?

Second, a request for feedback on a possible solution:

  1. create an arrow image in Figma (svg file)
  2. add it to a div (class: “bubble”) containing a div with text (class: “bubble-text”)
  3. set the parent div (“bubble”) to relative positioning
  4. use absolute positioning and z-index to place the arrow image relative to the text div (“bubble-text”).

Thanks in advance for any feedback!

Here is my site: https://preview.webflow.com/preview/fotonovela?utm_medium=preview_link&utm_source=designer&utm_content=fotonovela&preview=fbb8368a2230fa60cea76be00a140765&mode=preview

#2

@Drew_Long - you can do it without using psuedo-classes (which you can’t access in Webflow without custom css) or your second solution should work as well, just positioning an image or css shape within a parent. It depends on how you want it to look, if hand-drawn is a requirement, you may want to make a vector in Figma/Illustrator and use that, but you can also make the shape using css alone, which can be more flexible / lighter weight.

Here are a few examples:

1 Like
#3

Thanks a lot, Sam. These are great learning opportunities, for this and future projects. I will try the second example you shared, and my own idea using the vector.
Best,
Drew

#4

Actually, both of these first two examples you provided use before or after selectors, which is - I believe - “custom CSS” in Webflow world. Will try that now.

#5

@Drew_Long - yea, ideally you can simplify things by using the pseudo-elements, but you can easily do the same thing just using another element like a nested div.

#6

it looks great! Thank you very much.
Can you explain how to import the scss template into webflow?

#7

@Roy_Nativ in CodePen you can just click the little button in the upper right of the CSS code editor and select “View compiled CSS”

image
image1270×768 77.1 KB

Then just copy and paste that into a custom code section in Webflow.