创建消息框

Question

我正在尝试创建一个消息框，旁边有一个小块。像这样：

我能够用纯色实现它（带有黑客，我稍后会解释）。如果消息框已应用透明度（alpha），则会出现hackish部分。然后看起来像这样：

正如您在第二张图片中看到的那样，额外的部分与实际消息重叠。如何“剪切”重叠的额外部分，重新​​设计额外部分而不重叠消息框？

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>

修改

代替宝莱坞背景颜色会有图像。所以我不能只将颜色更改为border-color: #856e51;

Answer 1

为此课程.about::before

应用此颜色

.about::before {
    border-color: #856e51;
}

https://jsfiddle.net/o7df6egw/3/

Answer 2

不幸的是，你不能只用CSS做你所要求的。这就是为什么在使用圆形框时通常会看到边缘附着的“尾巴”而不是角落。

你需要一个图像或SVG来形成背景。如果您希望图像/ SVG是动态的，因为它会在不扭曲角落的情况下调整大小，您需要安排更复杂的HTML / CSS并提供单独的图像或与9-patch graphic类似的内容组合使用

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