create specific chat bubble shape with CSS

Question

I want to make a speech bubble shape identical to the image. What part of the CSS shown below can be modified to make it look like the picture? Can you help me to get the look I want?

.body{
  background : linear-gradient(to bottom, #fff,red)
}
.chat {
 position: relative;
 width: 270px;
 padding: 10px;
 margin: 1em auto 50px;
 text-align: center;
 color: black;
 background: #fff;
 border: 1px solid gray;
 border-radius: 30px;
}


.chat:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -2px;
  left: -7px;
  height: 20px;
  border-left: 20px solid #E5E5EA;
  border-bottom-right-radius: 16px 14px;
  -webkit-transform: translate(0, -2px);
}

.chat:after {
  content: "";
  position: absolute;
  z-index: 3;
  top: -2px;
  left: 4px;
  width: 26px;
  height: 20px;
  background: white;
  border-bottom-right-radius: 10px;
  -webkit-transform: translate(-30px, -2px);
}

<div class="chat"></div>

score 4 · Answer 1 · answered Aug 11 '21 at 02:53

We can't bring exactly as it is. I have tried to bring it near the shape.

.chat {
        position:relative;
        width:270px;
        padding:10px;
        height:50px;
        margin:1em auto 50px;
        text-align:center;
        color:black;
        background:#e5e5ea;
        //border: 1px solid gray;
        border-radius: 30px;
    }

    /* creates part of the curve */
    .chat:before {
        content: "";
        position: absolute;
        z-index: 2;
        top: 7px;
        left: -8px;
        height: 20px;
        border-left: 20px solid #E5E5EA;
        border-bottom-right-radius: 16px 14px;
        -webkit-transform: translate(0, -2px);
    }

    /* creates part of the curved pointy bit */
    .chat:after {
        content: "";
        position: absolute;
        z-index: 3;
        top: 7px;
        left: 4px;
        width: 26px;
        height: 20px;
        background: white;
        border-top-right-radius: 14px;
        -webkit-transform: translate(-30px, -2px);
    }

<div class="chat">

</div>

showdev · Accepted Answer · 2021-08-12T01:25:55.227

Here's a example based on Pure CSS speech bubbles by Nicolas Gallagher.

It uses overlapping pseudo-elements with border-radius to create the bubble's pointy curved stem. This may not be a pixel-perfect match to your mockup, but you can modify the values to improve the shape as desired.

body {
  background: lightgray;
  margin: 0;
}

.speech-bubble {
  position: relative;
  padding: 50px;
  margin: 1em 20px;
  text-align: center;
  color: black;
  background: white;
  border-radius: 30px;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  z-index:-1;
  left: -22px;
  top: 0;
  width: 40px;
  border-bottom: 35px solid white;
  border-top-right-radius: 25px;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  z-index:-1;
  left: -28px;
  top: -3px;
  height: 38px;
  width: 28px;
  background: lightgray;
  border-top-right-radius: 20px;
}

<div class="speech-bubble">Hello, world.</div>

This demo might help visualize how the stem is created:

body {
  background: lightgray;
  margin: 0;
}

.speech-bubble {
  position: relative;
  padding: 50px;
  margin: 1em 20px;
  text-align: center;
  color: black;
  background: white;
  border-radius: 30px;
}

.speech-bubble:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -22px;
  top: 0;
  width: 40px;
  border-bottom: 35px solid green;
  border-top-right-radius: 25px;
}

.speech-bubble:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -28px;
  top: -3px;
  height: 38px;
  width: 28px;
  background: red;
  border-top-right-radius: 20px;

}

<div class="speech-bubble">Hello, world.</div>

Also see:
How to create a curved speech bubble?
Speech bubble with arrow

If the background is a gradient, the z-index is applied after, so it can't be applied with the same background color? — 김세림, Aug 12 '21 at 00:12
True, this method does not accommodate gradient backgrounds very easily. [Speech bubble with arrow](https://stackoverflow.com/questions/30299093/speech-bubble-with-arrow) includes some other solutions, like using [clip-path](https://stackoverflow.com/a/65682691/924299) or [SVG](https://stackoverflow.com/a/30301490/924299). — showdev, Aug 12 '21 at 01:25
Body is gradient, and when applying a gradient outside the speech bubble arrow, speech-bubble:after uses z-index, so when applying transparent to the background, it is designated as the background of speech-bubble:before. In this case, is the only way to use svg? — 김세림, Aug 12 '21 at 02:31

create specific chat bubble shape with CSS

2 Answers2