How to make a curved triangle that has the same box-shadow as the other element?

Question

I'm trying to create a curved triangle to be put next to a 'chat message box'.

See this example:

As you can see in between the 'E' and the actual message box there is a little 'triangle' but its shape isnt made of a straigt line, instead it's a little bit curved.

On top of that, I would like to add a box-shadow to my triangle.

Here's the code that I have tried:

width: 0px;
height: 0px;
border-top: 32px solid transparent;
border-bottom: 0px solid transparent;
border-right: 22px solid white;
position: absolute;
left: -10px;
bottom: 0;
box-shadow: 0 2px 6px rgba(0,0,0,.9);

And it gives me this result: (I have purposefully added a super dark box-shadow so that it easier to understand my problem.)

So, to recap, what I'd like to achieve:

• A triangle that has one of its line curved as in the very first picture
• a box shadow around that triangle, that 'fits' with the other box shadow of the other element.

Thanks !

Answer 1

Based on a previous answer, you can add a drop-shadow filter to a shape created using radial-gradient for the curve:

.userMsgBottom {
  position: relative;
  color:#fff;
  max-width: 250px;
  background-color: #2e7384;
  margin: 30px 50px;
  padding: 10px;
  border-radius: 6px;
  filter:drop-shadow(0 0 5px #000);
}

.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -23px;
  width: 30px;
  height: 25px;
  background: radial-gradient(circle at top right, transparent 60%, #2e7384 62%);
}

.left.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -23px;
  width: 30px;
  height: 25px;
  background: radial-gradient(circle at top left, transparent 60%, #2e7384 62%);
}

<div class="userMsgBottom">
  Some text here Some text here Some text here
</div>

<div class="userMsgBottom left">
  Some text here Some text here Some text here
</div>

Safari doesn't support the syntax with at, here is another syntax for better support:

.userMsgBottom {
  position: relative;
  color:#fff;
  max-width: 250px;
  background-color: #2e7384;
  margin: 30px 50px;
  padding: 10px;
  border-radius: 6px;
  filter:drop-shadow(0 0 5px #000);
}

.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  right: -23px;
  width: 30px;
  height: 25px;
  background: 
    radial-gradient(circle, transparent 60%, #2e7384 62%) bottom left/200% 200%;
}

.left.userMsgBottom:after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: -23px;
  width: 30px;
  height: 25px;
  background: 
    radial-gradient(circle, transparent 60%, #2e7384 62%) bottom right/200% 200%;
}

<div class="userMsgBottom">
  Some text here Some text here Some text here
</div>

<div class="userMsgBottom left">
  Some text here Some text here Some text here
</div>