随内部文本一起增长的三角形（CSS）？

Question

所以我的客户有兴趣为标题/链接创建悬停效果，如下面的模型所示：

CSS 三角形的问题（据我所知）是它不会随着文本而增长。虽然它对于常青（不变）元素来说是一个很好的装饰元素，但我认为它不是这个目的的最佳选择。我的客户可以放入的字符数量非常有限，并且该字符数会发生变化。此外，图库中的图像采用砖石类型的布局，这使得三角形的固定外观使事情变得更加复杂。

这是我到目前为止所拥有的：

.triangle {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 173px 200px;
border-color: transparent transparent #362FFF transparent;
bottom: 0;
right: 0;
position: relative;
}

.triangle p {
text-align: center;
white-space: pre-wrap;
transform: none;
text-align: center;
top: 75px;
left: -100px;
position: relative;
width: 93px;
height: 93px;
margin: 0px;
font-size: 18px;
}

有谁知道如何创建能够变高或随文本改变形状的三角形？

谢谢！

Answer 1

使用线性渐变来模拟三角形可能是一个可行的解决方案。

:root {
  --cap-bg: rgb(0 0 255 / 0.7);
}

figure {
  margin: 0;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

figure>img {
  display: block;
}

figure>figcaption {
  position: absolute;
  right: 0;
  bottom: 0;
  background: var(--cap-bg);
  color: white;
  padding: 0.5em 1em;
  border-top-left-radius: 0.5em;
  text-align: right;
}

figure.triangle>figcaption {
  background: linear-gradient(161.6deg, #0000 50%, var(--cap-bg) 50%);
  display: flex;
  justify-content: end;
  align-items: end;
  padding-left: 7em;
  aspect-ratio: 3/1;
  box-sizing: border-box;
}

<div>
  <figure>
    <img src="http://picsum.photos/500/100">
    <figcaption>one</figcaption>
  </figure>
</div>

<div>
  <figure>
    <img src="http://picsum.photos/500/100">
    <figcaption>one two three four</figcaption>
  </figure>
</div>

<div>
  <figure class="triangle">
    <img src="http://picsum.photos/500/100">
    <figcaption>one</figcaption>
  </figure>
</div>

<div>
  <figure class="triangle">
    <img src="http://picsum.photos/500/100">
    <figcaption>one two three four</figcaption>
  </figure>
</div>

<div>
  <figure class="triangle">
    <img src="http://picsum.photos/500/100">
    <figcaption>one two three<br>four five six seven eight</figcaption>
  </figure>
</div>

<div>
  <figure class="triangle">
    <img src="http://picsum.photos/500/100">
    <figcaption>one two three four five six seven eight</figcaption>
  </figure>
</div>

<div>
  <figure class="triangle">
    <img src="http://picsum.photos/500/200">
    <figcaption>Lorem ipsum<br>dolor sit amet, consectetur<br>adipiscing elit. Maecenas tempor nunc<br>mauris, sit amet placerat tortor lobortis dapibus.</figcaption>
  </figure>
</div>