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>

Suresh Ponnukalai · Accepted Answer · 2021-08-11 02:53:09Z

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-12 01:25:55Z

2

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

edited Aug 12, 2021 at 1:25

answered Aug 11, 2021 at 3:41

showdev

29.3k37 gold badges61 silver badges82 bronze badges

3 Comments

김세림 Over a year ago

If the background is a gradient, the z-index is applied after, so it can't be applied with the same background color?

showdev Over a year ago

True, this method does not accommodate gradient backgrounds very easily. Speech bubble with arrow includes some other solutions, like using clip-path or SVG.

김세림 Over a year ago

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?

Collectives™ on Stack Overflow

create specific chat bubble shape with CSS

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related