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

我有下面的箭头，由一个矩形和一个三角形组成（使用边框）。我问这个问题是因为我想用渐变来填充三角形，而目前边界不支持渐变。有没有一种方法可以改变我目前的风格

.arrow{
高度：40px；
宽度：150px；
背景：#4e99b8；
利润率：20px 0 20px 20px；
位置：相对位置；
显示：块；
}
.阿罗：之后{
内容：“；
位置：绝对位置；
右：-20px；
顶部：0px；
边框顶部：20px实心透明；
边框底部：20px实心透明；
左边框：20px实心#4e99b8；

只需在Photoshop中创建一个。我需要能够根据需要缩放它并更改颜色（预览目的）.至于箭头：之前，我不太关心这种语法，我使用jQuery设置所有这些属性。显示这段代码的jQuery版本会有帮助吗？反向是什么意思？另外，我也尝试过在边界中放置渐变，但唉，我认为现在无法做到。反向是指使用bord如果你想要像这样简单，这里是演示和教程。