在这种情况下，有没有办法逆转边界和背景？

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;