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

Question

我用CSS伪元素创建了下面的箭头div.它对于固定高度工作正常但是当我将其高度设置为自动并增加文本时,它就像这样.现在是设置箭头以增加其与文本的高度.

我们可以通过使用jQuery来实现这一点但是只能在CSS中实现吗？

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

Answer 1

使用线性渐变:

你可以使用几个有角度的线性渐变来完成它,如下面的代码片段所示.正如您从代码片段中看到的那样,即使内容环绕(或),如果它跨越多行,它也可以适应任何高度.

形状创建如下:

• 几个线性渐变(带to [side] [side]语法),几乎是50%透明的,剩下的是透明的50%.这两个渐变都具有50%Y轴的尺寸(即,元素高度的一半)并且20px在X轴上具有尺寸(意味着它具有三角形的固定宽度).
• 这些线性渐变位于元素的右上角和右下角,以产生三角效果.
• 另一个线性梯度(实际上是纯色),其Y轴的大小是父级的100%高度和X轴的大小20px小于100%(使用calc).这产生了除三角形区域之外的彩色区域.

这种方法的优点如下:

• 它不需要任何额外的元素(真实的或伪的),因此标记中没有不需要的混乱,伪元素可以用于其他事物.
• 如可以在最后可以看出div,它会自己即使适应width的div变化也.
• 右侧的三角形切口是透明的,因此如果需要,也可以通过切割看到页面的背景.

这种方法的唯一两个缺点如下:

• 与伪元素相比,梯度具有较低的浏览器支持(仅适用于IE10 +)和
• 在一些非常宽的角度,倾斜的边将有点锯齿状.

.shape {
  position: relative;
  width: 200px;
  color: white;
  padding: 8px;
  margin: 4px;
  background: linear-gradient(to bottom right, rgb(128, 0, 128) 49%, transparent 51%), linear-gradient(to top right, rgb(128, 0, 128) 49%, transparent 51%), linear-gradient(to right, rgb(128, 0, 128), rgb(128, 0, 128));
  background-size: 20px 50%, 20px 50%, calc(100% - 20px) 100%;
  background-position: 100% 0%, 100% 100%, 0% 0%;
  background-repeat: no-repeat;
}
.shape.wide {
  width: 300px;
}

<div class='shape'>Some div with small content</div>

<div class='shape'>Some div with large content that wraps around into multiple lines</div>

<div class='shape'>Some div with large content that wraps
  <br>around into multiple lines
  <br>even spanning multiple lines</div>

<div class='shape'>Some div with
  <br>large content that wraps
  <br>around into multiple lines
  <br>even spanning
  <br>multiple lines</div>

<div class='shape wide'>Some div with
  <br>large content that wraps
  <br>around into multiple lines
  <br>even spanning
  <br>multiple lines</div>

使用SVG :(推荐方法,但下面添加为问题请求CSS)

使用SVG也可以实现相同的形状.使用SVG我们需要做的就是使用SVG的path元素创建一个路径,然后path相对于元素定位绝对(以及z-index: -1将其放在文本后面).SVG本质上是可扩展的,因此即使容器的宽度和/或高度增加它们也可以适应.

SVG的优点几乎与基于梯度的方法类似.SVG优于基于渐变的方法的方式是,它具有更好的浏览器支持(应该在IE9 +中工作)并且锯齿状边缘也不太明显.

.shape {
  position: relative;
  width: 200px;
  color: white;
  padding: 8px;
  margin: 4px;
}
.shape.wide {
  width: 300px;
}
.shape svg {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  z-index: -1;
}
.shape path {
  fill: rgb(128, 0, 128);
}

<div class='shape'>
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <path d='M0,0 1,0 0.9,0.5 1,1 0,1z' />
  </svg>
  Some div with small content</div>

<div class='shape'>
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <path d='M0,0 1,0 0.9,0.5 1,1 0,1z' />
  </svg>  
  Some div with large content that wraps around into multiple lines</div>

<div class='shape'>
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <path d='M0,0 1,0 0.9,0.5 1,1 0,1z' />
  </svg>  
  Some div with large content that wraps
  <br>around into multiple lines
  <br>even spanning multiple lines</div>

<div class='shape'>
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <path d='M0,0 1,0 0.9,0.5 1,1 0,1z' />
  </svg>  
  Some div with
  <br>large content that wraps
  <br>around into multiple lines
  <br>even spanning
  <br>multiple lines</div>

<div class='shape wide'>
  <svg viewBox='0 0 1 1' preserveAspectRatio='none'>
    <path d='M0,0 1,0 0.9,0.5 1,1 0,1z' />
  </svg>  
  Some div with
  <br>large content that wraps
  <br>around into multiple lines
  <br>even spanning
  <br>multiple lines</div>

注意:您可以了解更多有关SVG的path元素及其命令(如M,z,L,A等)在此MDN教程.我个人建议你看看SVG,因为它有助于创建很多复杂的形状,只需要很少的努力:)