Slanted backgrounds

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.

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