有没有一种使用CSS装饰带有楔形/三角形的线端的方法？

Question

我正在为使用wkhtmltopdf转换为pdf的发票制作HTML / CSS模板。设计的一部分是一个看起来如下方式的元素：

元素内的文本可以是可变长度的。元素后面的逻辑非常简单：只要存在换行符，就用楔形装饰行尾。我已使用css-tricks.com中的Matthew Pennell's Triple Element Method向每行添加了填充。我已根据需要对其进行了调整：

.padded-multiline {
    line-height: 1.4;
    padding: 0.005in 0;
    border-left: 0.16in solid #E7E7E9;
}
.padded-multiline p {
    background-color: #E7E7E9;
    padding: 0.02in 0;
    display: inline;
    margin: 0;
}
.padded-multiline p span {
    position: relative;
    left: -0.08in;
}

问题是我不确定如何用楔形装饰线条。我想要一个CSS解决方案，但是我不确定这是否可以实现。如果是单行文字，我可以很容易地在元素后添加一个灰色CSS三角形。或者，我可以添加一个背景图像，该图像由白色背景上的三角形组成，可以实现相同的效果。但是由于元素是多行的，所以我的想法已经用完了。

在嵌套元素上使用background-repeat: repeat-y似乎并没有达到我期望的效果，因为它只会将背景添加到最后一行。 我知道有一个::first-line伪选择器，但据我了解，没有::nth-line或其他相同类型的量词。

目前，我认为唯一可行的解​​决方案可能是使用JavaScript将文本分成单个元素，并将其视为多个单行元素而不是多行元素。但是我想避免使用JavaScript，因为这会增加PDF生成的开销，并且对我来说有点 。

有什么想法吗？

注意：

  

wkhtmltopdf和wkhtmltoimage是开源（LGPLv3）命令行工具，可使用Qt WebKit渲染引擎将HTML渲染为PDF和各种图像格式。

Answer 1

如果我们考虑到您不会手动插入换行符的事实，那么只有最后一行才被填满，直到最后一行才被填满。然后，我们可以单独考虑最后一个边缘，然后一起考虑其他边缘。

这是一个主意：

City  Hour  Temperature
A      1      30
B      2      40

p {
 line-height:20px;
 padding:0 30px;
 background:
  linear-gradient(to top left,#fff 49%,transparent 50%) top right/20px 20px repeat-y,
  grey;
  overflow:hidden;
}
span {
  position:relative;
  display:inline-block;
  vertical-align:bottom;
}
span:before {
  content:"";
  position:absolute;
  left:30px; /*equal to padding*/
  bottom:0px;
  height:20px; /*equal to line-height*/
  background:
    linear-gradient(to top left,#fff 49%,grey 50%) top left/20px 20px no-repeat,
    #fff;
  right:-100vw;
}

如果您需要换行，请不要使用<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus ipsum, posuere a tincidunt non, consectetur et mi. Sed congue ornare lorem, et placerat velit tempus nec. Phasellus fringilla eleifend vestibulum. Nunc lobortis ipsum a nisi dignissim sollicitudin. Ut elit leo, ultrices mollis metus non,<span></span> </p>，而要使用许多<br>标签：

p

p {
 line-height:20px;
 padding:0 30px;
 background:
  linear-gradient(to top left,#fff 49%,transparent 50%) top right/20px 20px repeat-y,
  grey;
  overflow:hidden;
  margin:0;
}
span {
  position:relative;
  display:inline-block;
  vertical-align:bottom;
}
span:before {
  content:"";
  position:absolute;
  left:30px; /*equal to padding*/
  bottom:0px;
  height:20px; /*equal to line-height*/
  background:
    linear-gradient(to top left,#fff 49%,grey 50%) top left/20px 20px no-repeat,
    #fff;
  right:-100vw;
}

更新

您可以使用简单的图像或SVG代替渐变：

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus ipsum, posuere a tincidunt non,  Ut elit leo, ultrices mollis metus non,<span></span> </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus ipsum, posuere a tincidunt non, consectetur et mi. Sed congue ornare lorem, et placerat velit tempus nec. Ut elit leo, ultrices mollis metus non,<span></span> </p>

p {
  line-height: 20px;
  padding: 0 30px;
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><polygon points="20 20,0 20, 20 0" fill="white" /></svg>') top right/20px 20px repeat-y;
  background-color: grey;
  overflow: hidden;
  margin: 0;
}

span {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
}

span:before {
  content: "";
  position: absolute;
  left: 30px; /*equal to padding*/
  bottom: 0px;
  height: 20px; /*equal to line-height*/
  background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 20 20" width="20" height="20" xmlns="http://www.w3.org/2000/svg"><polygon points="0 0,0 20, 20 0" fill="grey" /></svg>') top left/20px 20px no-repeat;
  background-color: #fff;
  right: -100vw;
}