制作圆边三角形对话框

Question

我们正在开发一个应用程序，在该应用程序中，我们在 div 中显示文本，如聊天框方向，但有一条小曲线，如下面的屏幕截图所示。

需求截图（紫色标记）

我已经成功创建了一个带有直边的对话框，如下所示，

.big{
    width: 300px;
    height: 80px;
    background-color: #000000;
    box-shadow: 0 0 20px rgba(0, 0, 0, .3);
    position: relative;
    border-radius: 6px;
}
  
  .big::after {
    content: '';
    position: absolute;
    visibility: visible;
    top: 0px;
    right: -50px;
    border: 50px solid transparent;
    border-top: 30px solid #000;
    clear: both;
  }

````

那么我怎样才能在当前的设计中制作这条曲线呢？

Answer 1

你可以尝试这样的事情

.big {
  --bg-color: steelblue;

  width: 300px;
  height: 80px;
  background-color: var(--bg-color);
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, .3));
  position: relative;
  border-radius: 6px;
  border-top-right-radius: 0;
}

.big::after {
  content: '';
  position: absolute;
  display: block;
  top: 0px;
  right: 0;
  transform: translateX(100%);
  height: 50%;
  aspect-ratio: 1/1;
  background-image: radial-gradient(farthest-side at bottom right, transparent 100%, var(--bg-color) calc(100% + 1px));
}

<div class="big"></div>