Обычный прямоугольник + css треугольник.
У прямоуголника - градиент, у треуольника - просто прозрачность границы с цветом нижней границы прямоугольника.
По факту на уголке не будет градиента, но на глаз это будет не заметно.
С надписью еще проще - два псевдоэлемента-линии.
