Curve border using clip path in css

Question

Hi Here I'm trying to add a speech bubble at the bottom left I used clip-path but the problem is I unable to adjust the pixels properly to look clear and exactly what I want. Can anyone suggest to me how to achieve it and any other alternate way to do it? My code

body {
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tolltip {
  width: 147px!important;
  height: auto;
  background: transparent;
  border: 4px solid white;
  border-radius: 10px 10px 10px 0;
  position: relative;
  border-bottom-color: transparent;
}

.tolltip:after {
  content: "";
  position: absolute;
  left: -4px;
  bottom: -38px;
  width: 13px;
  height: 72px;
  clip-path: polygon(0 0, 4px 0, 4px 37px, 53px 0, 40px 0, 0px 49px);
  background: white;
}

.tolltip:before {
  content: "";
  position: absolute;
  left: 8px;
  right: 0px;
  bottom: 0;
  border-bottom: 4px solid white;
}

<div class="tolltip">
  <h3>content</h3>
</div>

Trying to achieve this

related: https://stackoverflow.com/a/65682691/8620333 – Temani Afif Mar 10 '21 at 08:11 — Temani Afif, Mar 10 '21 at 08:11

score 0 · Accepted Answer · answered Mar 10 '21 at 08:24

Here is a different idea:

.tolltip {
  width: 147px;
  margin: auto;
  position: relative;
  padding: 10px;
}

.tolltip:before,
.tolltip:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  border: 5px solid #fff;
}

.tolltip:before {
  top: 0;
  right: 0;
  border-radius: 15px 15px 15px 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 
     25px 100%,  /* 25px = after width + border width */
     25px calc(100% - 10px), /* 10px is simply a bigger value than border width */
     0    calc(100% - 10px), 
     0    100%);
}

.tolltip:after {
  top: 50%;
  width: 20px; /* adjust this */
  border-top: 0;
  border-right: 0;
  transform-origin: right;
  transform: skewY(-40deg); /* add this */
}

body {
  background: linear-gradient(90deg, rgba(2, 0, 36, 1) 0%, rgba(121, 9, 49, 1) 35%, rgba(0, 212, 255, 1) 100%);
}

<div class="tolltip">
  <h3>content</h3>
</div>

This is perfect but the arrow is a little bit smaller as you can see in the image. — Husna, Mar 11 '21 at 03:57
@Husna simply adjust the different value until you get what you want (see the comments in the code) — Temani Afif, Mar 11 '21 at 07:33
@TemaniAfif how can bring that tail on top right as per this attachment [link](https://stackoverflow.com/questions/70515344/speech-bubble-using-css?noredirect=1#comment124650504_70515344) ? — Jade, Dec 29 '21 at 06:50

Curve border using clip path in css

1 Answers1