create specific chat bubble shape with CSS

user_8799509 0
Viewed 1858

enter image description here

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>
css html
2 Answers

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>

user_36070640

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

user_9242990
Related