如何制作一个与其他元素具有相同阴影的弯曲三角形？

Question

我正在尝试创建一个弯曲的三角形，放在“聊天消息框”旁边。

请参见以下示例：

如您所见，在“ E”和实际的消息框之间有一个小“三角形”，但它的形状不是由一条直线组成，而是有点弯曲。

最重要的是，我想在三角形中添加一个盒子阴影。

这是我尝试过的代码：

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);

它给了我这个结果：（我有意添加了一个超级黑盒子阴影，以便更容易理解我的问题。）

因此，回顾一下，我想要实现的目标：

• 一个三角形，它的一条线像第一张照片一样弯曲
• 围绕该三角形的框阴影，与其他元素的另一个框阴影“匹配”。

谢谢！

Answer 1

基于previous answer，可以向使用drop-shadow创建曲线的形状添加radial-gradient过滤器：

.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，这是获得更好支持的另一种语法：

.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>