I'm trying to reconstruct the following speech bubble in HTML and CSS: The speech bubble to recreate
How would I create the speech bubble with the black border going around the wedge on the speech bubble? I'm able to create a speech bubble without a border by merging two shapes together given by this codepen:
https://codepen.io/riojosdev/pen/RwrROqy
Code snippet of wedge: `
.right-point {
width: 0;
height: 0;
border-left: 2vh solid black;
border-right: 2vh solid black;
border-top: 10vh solid var(--main-light-color);
position: absolute;
bottom: 45%;
right: -10%;
transform: rotate(-120deg);
}`
However due to the construction of using shapes, adding a continuous border around the speech bubble isn't clear to me.