五角大楼 div 里面有动态文本

如何解决五角大楼 div 里面有动态文本

偶然发现了一个有点复杂的要求，它需要一个右侧有一个三角形边的容器，它根据里面的内容而扩展，并且它应该有一个圆角。这是我设法做的：

<div class="a">
<div class="b">
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
  asd asd asd asdasd<br>
</div>
</div>

.b {
  background-color:red;
  border-radius: 10px;
  clip-path: polygon(0% 0%,85% 0%,100% 50%,85% 100%,0% 100%);
  padding: 20px;
}

.a {
  width: 200px;
  border: 1px solid black;
}

您可以与所需的输出进行比较，除了右侧的圆角外，它几乎相同。