五角大楼 div 内有动态文本

Question

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

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

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

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

Answer 1

就是要玩给定的裁剪路径的水平和垂直百分比。我已经像下面这样更新了你的剪辑路径，并以一些弯曲的形状结束。

clip-path: polygon(0% 0%, 81% 0%, 82% 1%, 83% 2%, 84% 3%, 85%  5%, 100% 50%, 89% 96%, 88% 98%, 87% 99%, 86% 100%, 85% 100%, 0% 100%);

.b {
  background-color:red;
  border-radius: 10px;
  clip-path: polygon(0% 0%, 81% 0%, 82% 1%, 83% 2%, 84% 3%, 85%  5%, 100% 50%, 89% 96%, 88% 98%, 87% 99%, 86% 100%, 85% 100%, 0% 100%);
  padding: 20px;
}

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

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

五角大楼 div 内有动态文本

Pentagon div with dynamic text inside

html

css

css-shapes

clip-path