I wish to design a speech bubble using only CSS.
There are specific requirements I need to meet:
- It should adjust its size based on content with some padding or a set size.
- The background color must be semi-transparent.
- You must be able to define a border, including its level of transparency.
- Setting a border-radius should affect both the border and background.
Here is an example of how I envision two such speech bubbles looking. The first has a preferred width and height, centered content, while the second adjusts its dimensions based on the content with added padding. The key feature here is that in both cases, the triangular pointer remains the same size and stays centered. https://i.stack.imgur.com/363Zq.jpg
I have explored various approaches for creating speech bubbles and tried customizing examples, such as #34 from here:
// Code snippet...However, when attempting to set a semi-transparent background color (with a border-radius to mask the overflow behind the border), the triangular point at the bottom does not get filled in. I couldn't find a solution for this issue.
I also came across a similar question here, where I adapted the following code:
<div class="background">
<div class="bubble">
<p>
Hello world! I am some content. Who's got time for lorems?
</p>
</div>
</div>
.background {
background: pink;
display: flex;
// Other styles...
}
// More CSS code...But issues arise when introducing semi-transparent colors, causing skewed transforms to overlap and create color discrepancies.
https://i.stack.imgur.com/PQzom.png
Additionally, answers in this post show differing opacity levels between the triangle and the background:
<div class="wrapper">
<p class="infoBubble">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
.wrapper {
background: pink;
// Additional styles...
}
// More CSS code...https://i.stack.imgur.com/HkmbM.png https://i.stack.imgur.com/dL8JT.png
So, the final question remains - what is the best approach to achieve the desired results?