<div class="el">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet, ex facilis quas culpa voluptatem modi nobis itaque ratione quibusdam cum! Facere inventore tempore provident minima et corrupti fuga, velit asperiores?
</div>
.el {
  --arrow-height: 2rem;
  position: relative;
  padding: 50px 100px;
  border-radius: 15px;
  background-image: linear-gradient(60deg, red,orange,yellow,green,blue);
  background-position: 0 0;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% + var(--arrow-height));
    clip-path: polygon(
      calc(100% - 140px) calc(100% - var(--arrow-height)),
      calc(100% - 40px) calc(100% - var(--arrow-height)),
      calc(100% - 20px) 100%
    );
    background-image: linear-gradient(60deg, red,orange,yellow,green,blue);
   background-position: 0 0;
    pointer-events: none;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.