Speech bubble using CSS

Issue

As I'm not expert in CSS, requesting help everyone. am trying to create speech bubble like below. but i could only able to get oval shape. I don't know how add tail on top right corner.

I've gone through all SO solution but don't know which CSS property need to change to make top right tail as per below image.

html

<div class="bubble-wrapper">
  <div class="flat-oval"></div>
</div>

CSS

 .flat-oval {
  border: 1px solid green;
  width: 160px;
  height: 80px;
  background-color: green;
  border-radius: 50%;
  
  position: relative;
  left: 0%
}

.bubble-wrapper{
  border: 1px solid red;
  text-align: center;
}

that tail should be bit long and lean.

Thanks to all

Solution

do it like below:

.speech {
  width: 200px;
  height: 100px;
  border-radius: 100%;
  background: red;
  margin: 50px;
  position: relative;
  filter:drop-shadow(0 0 1px #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000) drop-shadow(0 0 0 #000)
}

.speech:before {
  content: "";
  position: absolute;
  top: -15%;
  left: -10%;
  border-radius: 100px 100px 0 0;
  width: 60px;
  height: 30px;
  box-shadow: 20px 0 0 red;
}

<div class="speech"></div>

Answered By - Temani Afif