<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;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.