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