html - 创建消息框

Question

我正在尝试创建一个消息框，其侧面有一小块。像这样:

我能够用纯色实现它(通过 hack，我稍后会解释)。如果消息框应用了透明度 (alpha)，那么骇人听闻的部分就会开始出现。然后看起来像这样:

如您在第二张图片中所见，多余的部分与实际消息重叠。如何在不与消息框重叠的情况下“剪切”重叠的额外部分，重新​​设计额外部分？

JSFiddle

body {
  background-color: burlywood;
}
.about {
  max-width: 300px;
  padding: 15px;
  text-align: right;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 15px;
  position: relative;
  z-index: 0;
}
.about::before {
  content: "";
  box-sizing: initial;
  border-color: rgba(0, 0, 0, 0.4);
  border-radius: 50%;
  border-style: solid;
  border-width: 0 25px;
  position: absolute;
  height: 43px;
  width: 53px;
  bottom: -4px;
  right: -78px;
  clip: rect(18px, 37px, 42px, 0px);
  z-index: -1;
}

<div class="about indent text-message-animation">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

编辑

代替 burlywood 背景颜色的将是一个图像。所以我不能只将颜色更改为 border-color: #856e51;

Answer 1

不幸的是，您不能仅使用 CSS 来完成您的要求。这就是为什么您在使用圆 Angular 框时通常会看到“尾部”附着在边缘而不是 Angular 上。

您需要一张图片或 SVG 来构成背景。如果您希望图像/SVG 是动态的，因为它可以调整大小而不扭曲 Angular 落，您需要安排更复杂的 HTML/CSS 并提供单独的图像或与类似于 9-patch graphic 的东西结合使用.

(如果您对 9 补丁方法感兴趣，它们通常用于 Android，但有 Javascript libraries 使它们更易于在网络上使用。)