CSSを使用してラインエンドをウェッジ/三角形で装飾する方法はありますか？

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>

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

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

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