I advise you to take a look at clip-path especially when it comes to triangular shapes. It's more efficient than using the border hack. Unfortunately, the very old articles are well referenced in google and people always get the old ways to draw shapes when searching google.
I think clip-path has a little way to go before it's really responsive though, I don't think it would be possible, unless I'm mistaken, to stretch the body of a speech bubble without stretching its tab.
Reponsive is indeed another argument to use clip-path. With border you have no way to consider percentage value while with clip-path you can either use fixed value to do the same thing you do with border or use percetange values
That speech bubble can be done like below: jsfiddle.net/jmvt6a52/ jsfiddle.net/jmvt6a52/2/ (need few more hack for the radius)
In both cases, you can adjust the size of the element without stretching the tab.
I advise you to take a look at clip-path especially when it comes to triangular shapes. It's more efficient than using the border hack. Unfortunately, the very old articles are well referenced in google and people always get the old ways to draw shapes when searching google.
I think clip-path has a little way to go before it's really responsive though, I don't think it would be possible, unless I'm mistaken, to stretch the body of a speech bubble without stretching its tab.
Reponsive is indeed another argument to use clip-path. With border you have no way to consider percentage value while with clip-path you can either use fixed value to do the same thing you do with border or use percetange values
That speech bubble can be done like below:
jsfiddle.net/jmvt6a52/
jsfiddle.net/jmvt6a52/2/ (need few more hack for the radius)
In both cases, you can adjust the size of the element without stretching the tab.
If I were not supporting IE (and that day is coming) I would use version 1. That's basically I what I do do but with the triangle hack.
Thanks @afif for adding your thoughts. I agree with you.