Speech bubble using CSS-CodePudding

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 >
  <div ></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

CodePudding user response：

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 ></div>

CodePudding user response：

I hope Its useful to you..

.bubble-wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-70%, -50%);
      width: 80vmin;
      height: 80vmin;
  }


  .bubble-wrapper div {
      position: absolute;
      box-sizing: border-box;
  }

  .b {
      border: 0.5vmin solid black;
  }

  .r {
      border-radius: 100%;
  }

  .hb::before,
  .ha::after {
      content: "";
      display: block;
      position: absolute;
  }

  .bubble {
      width: 40%;
      height: 25%;
      left: 73%;
      top: 10%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 5vmin;
      background: #ffd;
      box-shadow: 0 -0.25vmin, 0 0.125vmin;
      font-family: "Comic Sans", "Comic Neue", sans-serif;
  }

  .bubble::before {
      width: 40%;
      height: 250px;
      bottom: -10px;
      border-radius: 50%;
      left: -60px;
      box-shadow: 0.5vmin 0, 3vmin -1vmin #ffd, 3vmin -1vmin 0 0.5vmin;
      clip-path: polygon(0% 49%, 150% 51%, 150% 100%, 0% 100%);
      transform: rotateZ(-210deg) scaleX(-1);
  }

<div >
  <div >Hello....</div>
</div>

CodePudding user response：

Well, you can use clip-path property in case of creating that tail thing. Using clip-path you can create any kind of shape you want. Here is some link that might help to learn more about clip-path. similar kind of project: https://freefrontend.com/css-speech-bubbles/ clip-path documentary: https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path