diagonal ribbon

Guess that this is just an image – a photoshop thing.
Do you need this often – or just for a few images?

See here – this is made with caption of Image ALB:
https://webers-testseite.de/image-with-ribbon/

In any case I think it would be better to do it in a photo editing program. Just look at the way it behaves when you make the screen smaller.

the image alb got a custom-class: with-ribbon

.with-ribbon .av-caption-image-overlay-bg {
    display: none;
}

.with-ribbon .av-image-caption-overlay-center p {
  background-color: rgba(255,0,0,0.8);
  color: #fff;
  text-shadow: 1px 2px 3px #000;
  padding: 20px ;
  position: absolute;
  top:5%;
  left: -10%;
  transform: rotate(-30deg) ;
  width: 80%;
  text-align: left;
  text-indent: 40px;
  box-shadow: 1px 2px 8px #000;
  font-size: 36px;
  text-transform: uppercase;
}