0

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.

FMMDev
  • 1

0 Answers0