Html 使用CSS创建具有动态高度和向内箭头的div

我已经用CSS伪元素创建了下面的arrow div。对于固定高度，它工作正常，但当我将其高度设置为“自动”并增加文本时，它会变成这样。现在要设置箭头，使其随文本增加高度

我们可以通过使用jQuery来实现这一点，但是否可以仅在CSS中实现这一点

---

使用线性渐变：

您可以使用两个有角度的线性渐变，如下面的代码片段中所示。从代码段中可以看到，即使内容环绕（或跨越多行），它也可以适应任何高度

形状的创建如下所示：

• 一对线性渐变（使用

  到[side][side]

  语法），几乎

  50%

  为彩色，其余

  50%

  为透明。这两种渐变在Y轴上都有

  50%

  大小（即元素高度的一半），在X轴上都有

  20px

  大小（这意味着三角形的宽度是固定的）
• 这些线性渐变位于元素的右上角和右下角，以产生三角形效果
• 另一个线性渐变色（实际上是纯色），其Y轴上的大小为父对象高度的100%，X轴上的大小小于

  100%

  （使用

  calc

  ）。这将生成三角形区域之外的彩色区域

这种方法的优点如下：

• 它不需要任何额外的元素（real或pseudo），因此标记中没有不需要的混乱，并且pseudo元素可以用于其他事情
• 从上一个

  div

  中可以看出，即使

  div

  的

  宽度也发生变化，它也会自动调整
  右侧的三角形切口是透明的，因此如果需要，也可以通过切口看到页面的背景
  

这种方法的两个缺点如下：

• 与伪元素相比，渐变具有更低的浏览器支持（仅适用于IE10+）和
• 在一些非常宽的角度下，有角度的边将有点锯齿状

.shape{
位置：相对位置；
宽度：200px；
颜色：白色；
填充：8px；
保证金：4倍；
背景：线性渐变（右下角，rgb（128，0，128）49%，透明51%），线性渐变（右上角，rgb（128，0，128）49%，透明51%），线性渐变（右下角，rgb（128，0，128），rgb（128，0，128））；
背景尺寸：20px 50%，20px 50%，计算（100%-20px）100%；
背景位置：100%0%、100%100%、0%0%；
背景重复：无重复；
}
.形状.宽度{
宽度：300px；
}

一些小内容的div
有些div包含大量内容，可以换行成多行
一些包含大量内容的div

绕成多行

甚至跨越多条线
有人和我约会

包装的大型内容

绕成多行

均匀跨越

多行
有人和我约会

包装的大型内容

绕成多行

均匀跨越

多行

除了Harry的答案，您还可以使用扭曲的伪元素来创建这种形状

div{
高度：20vh；
宽度：50%；
背景#800080；
位置：相对位置；
过渡：全部为0.4s；
光标：指针；
}
部门：之前，
部门：之后{
内容：“；
位置：绝对位置；
左：0；
宽度：100%；
身高：50%；
背景#800080；
z指数：-1；
}
部门：以前{
排名：0；
变换：skewX（-45度）；
变换原点：左下角；
}
部门：之后{
最高：50%；
变换：skewX（45度）；
变换原点：左上角；
}
/*仅演示*/
div:悬停{
宽度：80%；
高度：50vh；
}

悬停以查看已调整大小的元素

.label-box-st1::after {
  border-bottom: 73px solid #800080;
  border-right: 45px solid rgba(0, 0, 0, 0);
  border-top: 73px solid #800080;
  content: "";
  position: absolute;
  right: -43px;
  top: 0;
  width: 20px;
}