Creating a speech bubble tail using linear gradient
Hi, i've been trying to recreate this speech tail, but currently having hard time recreating the inner tail which should match the linear gradient of the body. Tried a few things, but with no avail. Would appreciate some help.
Codepen: https://codepen.io/CruelAngelsThesis/pen/vYPeMvK
11 Replies
Is it always one line of text, or can it break on to multiple lines?
If it's always one line, I'd use an SVG with that shape, and use it for a clip-path
it can break on to multiple lines, but the tail should always be positioned in the same place like this
thanks. I'll try this out. Don't have a lot of experience using clip-path should a good learning opportunity.
bit trickier with multiple lines... though clip-path still might be the best (only?) solution?
Played around with it some more but still no result. Now I understand why having multiple lines makes it tricky. I think the tail's background shoud match the message's only if it's one line.That should making it less tricky. Clip path is tricky š
. Gonna try again tomorrow š¤
Maybe pseudo elements ? The outline/border does make it tricky though
here an option with a pseudo, but as said before, the border is tricky, you won't get it as smooth as you probably want. this also will only work if the direction of the gradient is a right angle.
https://codepen.io/MarkBoots/pen/WNmXxVG
Woah I have no idea how you even made that border around the pseudo element. Does the dropshadow inherit or ā¦? Because there is no border or shadow declared on the pseudo element. Iām puzzled
yep its the multiple filter: dropshadow's on the element. its is applied to the full element (including the pseudo)
oh this is really cool, thank you.
i have been playing around with your solution and trying to combine it with my initial approach and got something very close to what i wanted. Looks good. I just gotta tweak the numbers a bit more.
Need to learn a lot more about clip-path. So much cool stuff you can do with it.
If you combine background-image: inherit with background-position, it is possible to go beyond linear gradients and use arbitrary images. https://codepen.io/chooking/pen/JjzMqjV