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

问题描述

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

Fiddle

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

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）