CODEWITHSUNDEEP
css
Jade
Jade

Reputation: 69

Speech bubble using CSS

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.

enter image description here

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

Upvotes: 0

Views: 689

Answers (3)

Temani Afif
Temani Afif

Reputation: 272957

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>

Upvotes: 3

Himesha Patel
Himesha Patel

Reputation: 141

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 class="bubble-wrapper">
  <div class="bubble b r hb">Hello....</div>
</div>

Upvotes: -1

Tech Sink
Tech Sink

Reputation: 52

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

Upvotes: -1

Related Questions