Create curved speech bubble tail

Question

How can I create the white background shape in the following image using pure CSS?

I'm already able to achieve the top-left and bottom-right curved corners using border-radius, so I am specifically talking about the pointy "tail" shape in the bottom-left corner.

I was hoping to be able to use a pseudo element with some kind of cool border-radius or clip-path trick to create the shape rather than having to resort to using an SVG background on the pseudo element.

Has anyone got a way to do this with pure CSS?

The element appears multiple times on different coloured backgrounds so the "cut out" curved part of the tail needs to be transparent.

please share code what you have tried so far – Naga Sai A Jul 29 '19 at 15:38 — Naga Sai A, Jul 29 '19 at 15:38

score 1 · Answer 1 · answered Jul 29 '19 at 15:39

This with some slight tweaks helps achieve this. Basically what they did is make a circle with a big border and then they cut off the undesired parts. If you move the circle around you can make the inverted circle kind of effect as you described.

body {
  background: green;
}

.rect {
  height: 100px;
  width: 100px;
  background: rgba(0, 0, 0, 0.5);
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.circle {
  display: block;
  width: 40px;
  height: 100px;
  top: 0px;
  left: -40px;
  position: absolute;
  overflow: hidden;
}

.circle:after {
  content: '';
  width: 100px;
  height: 100px;
  -moz-border-radius: 100px;
  -webkit-border-radius: 100px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0);
  position: absolute;
  top: -40px;
  left: -100px;
  border: 40px solid transparent;
  transform: rotate(45deg);
  border-right: 40px solid rgba(0, 0, 0, 0.5);
}

.overflow {
  overflow: visible;
}

<div class="rect">&nbsp;<span class="circle"></span></div>
<div class="rect">&nbsp;<span class="circle overflow"></span></div>

Create curved speech bubble tail

1 Answers1