Houdini makes slanted backgrounds so much easier. Even in multiple lines.

The drawback here is that background colors are “correct” only on first paint, as there is no way to handle lines specifically and no way to store state. This demo is facing similar problems that the Rough boxes one.

Support: Chrome/Opera (paint worklet)

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id tempore repudiandae iusto odio adipisci, quidem consectetur ullam, itaque alias qui?

.el span {
  box-decoration-break: clone;
  background: hsl(276, 100%, 50%);
}
@supports (background: paint(slanted-bg)) {
  .el.is-loaded span {
    padding-right: 30px;
    background: paint(slanted-bg);
  }
}