css - この状況で境界線と背景を逆にする方法はありますか?

Question

長方形と三角形で構成された次の矢印があります（境界線を使用して作成）。三角形をグラデーションで塗りつぶしたいので、この質問をしていますが、現在、境界線はグラデーションをサポートしていません。現在のスタイルを逆にする方法はありますか?

.arrow {
    height: 40px;
    width: 150px;
    background: #4e99b8;
    margin: 20px 0 20px 20px;
    position: relative;
    display: block;
}

.arrow:after {
    content: "";
    position: absolute;
    right: -20px;
    top: 0px;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 20px solid #4e99b8;