Speech Bubble with triangle & translucent background - html

Question

Hi I am trying to make a translucent speech bubble with a border. To make the triangle I am using a ::before element for large triangle and an ::after for a smaller one that sits on top, so it looks like it has a border. But since I want it translucent, the ::before element can be seen and ruins it. Please help me to fix this
.bubble {
max-width: 75%;
min-width: 200px;
padding: 8px 12px 0 12px;
position: relative;
border-radius: 4px;
text-align: left;
margin-left: auto;
background-color: rgba(255, 0, 0, 0.3);
border: 1px solid black;
border-top-right-radius: 0;
margin-right: 16px;
}
.bubble::before, .bubble::after {
position: absolute;
width: 0;
height: 0;
top: 0;
content: '';
border-style: solid;
right: 0;
transform: translateX( 100% );
}
.bubble::before {
border-color: black transparent transparent transparent;
border-width: 18px 18px 0 0;
top: -1px;
}
.bubble::after {
border-color: rgba(255, 0, 0, 0.3) transparent transparent transparent;
border-width: 16px 16px 0 0;
}
<div class="bubble">
<p>
Hello
</p>
</div>

Answer 1

A skew transformation can help you here:
.bubble {
max-width: 75%;
min-width: 200px;
padding: 8px 12px 0 12px;
position: relative;
border-radius: 0 0 4px 4px;
margin-top:40px;
border: 1px solid black;
border-top:0;
margin-right: 16px;
}
.bubble::before,
.bubble::after{
content: '';
position: absolute;
width: 70%;
height: 20px;
top: -21px;
border:1px solid;
}
.bubble::before {
right:-1px;
border:1px solid;
border-width:1px 1px 0 0;
transform-origin:bottom;
transform:skew(-45deg);
}
.bubble::after{
left:-1px;
border-width:1px 0 0 1px;
border-radius:4px 0 0 0;
}
p {
margin-top:0;
}
<div class="bubble">
<p>
Hello
</p>
</div>

Answer 2

Try a same color without transparency using color-picker . It can solve your problem .
See in below snippet
.bubble {
max-width: 75%;
min-width: 200px;
padding: 8px 12px 0 12px;
position: relative;
border-radius: 4px;
text-align: left;
margin-left: auto;
background-color: rgba(255, 0, 0, 0.3);
border: 1px solid black;
border-top-right-radius: 0;
margin-right: 16px;
}
.bubble::before, .bubble::after {
position: absolute;
width: 0;
height: 0;
top: 0;
content: '';
border-style: solid;
right: 0;
transform: translateX( 100% );
}
.bubble::before {
border-color: black transparent transparent transparent;
border-width: 18px 18px 0 0;
top: -1px;
}
.bubble::after {
border-color: rgb(255, 178, 178) transparent transparent transparent;
border-width: 16px 16px 0 0;
}
<div class="bubble">
<p>
Hello
</p>
</div>

Answer 3

I've created an svg for you. Would this help?
<svg
id="ff27feca-6648-4bac-87a3-a2646769617b"
data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 694 178"
>
<defs>
<style>
.a7bae820-8942-4935-b994-ad6a9d32b3d2 {
fill: none;
stroke: #000;
stroke-miterlimit: 10;
stroke-width: 10px;
}
</style>
</defs>
<path
class="a7bae820-8942-4935-b994-ad6a9d32b3d2"
d="M567.37,164H44.63A29.64,29.64,0,0,1,15,134.37V45.63A29.64,29.64,0,0,1,44.63,16H667L597,67v67.37A29.64,29.64,0,0,1,567.37,164Z"
/>
</svg>