I am looking to generate a comic balloon with CSS, that is, a dialog balloon with text and a "tail" in the style that appear in comics. The solution as much as possible seeks that the "tail" of the balloon has a rounded appearance, as shown in the image:
I found a way which I am posting as an answer . But how could you improve the design of the proposed Cartoon Balloon?
I give you a way to do it, using the pseudo element
::before
.In the html, I would use this structure:
And in the css to the container div we will use it as a reference to position the balloon in some coordinates of the box.
Now would come the balloon, which we position absolutely and some measurements (whatever you want), the only weird thing is that I use it
filter
to generate a shadow, but because this is a little different from how the property generatesbox-shadow
it, you'll see why .Once the balloon is created, we are going to create the "tail", I do this using
::before
, we create an empty content and position it in reference to the balloon. Here we have to accommodate it according to its measurements, being something like this:And depending on how we will position it, whether up or down, left or right, is that we play with the coordinates in
X
andY
, like this:To add that triangle effect, I prefer to do it with transform: skew(xdegrees), like so:
The reason why I use drop-shadow is because it covers the container and what protrudes from it in shadow, regardless of the shape, also if the element that protrudes does not have a background color or borders, these are not taken into account in the shadow, an example:
Update
Now, you can make everything more dynamic, using the
custom properties
, to automatically calculate the other measurements based on the width of the tail.Also I found out how you can achieve the curve, it's just a matter of combining the properties of box-shadow and border-radius, see:
You really wouldn't need that many elements to be able to make the vignette tab. It would be enough for you to use the pseudo-element
:before
on the div on which you have the bullet.In this case, to simulate the triangle, I have used margins, since using
width: 0
andheight: 0
each one of the margins tends to form a triangle the bigger we make it.Lastly, to center the text inside the div both vertically and horizontally you could use
flexbox
to center it vertically using the propertyalign-items: center
and, since it is text, you can center it usingtext-align: center;
.Note: I have used
transform: rotate()
to give it a slope that will be according to the corner of your balloon.Example:
I leave my solution here as an answer but I would like to know how you would do it, especially with the Delta (Tail) of the Globe, since in this case I had to use several Div to be able to create it...