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;