Javascript 可以扭转进度条的倾斜吗？

我不知道该怎么做，是否真的有可能在不使用图像的情况下用css、html、javascript或jquery扭曲进度条

我的意思是：

到目前为止我得到了什么（只是一个正常的进度条…）：

#xp条{
最高：60%；
左：5%；
高度：10px；
宽度：90%；
背景:#035；
边界半径：5px；
/*保证金：0px 0px 0px 15px*/
显示：内联块；
垂直对齐：中间对齐；
位置：绝对；}
#xp条填充{
身高：100%；
宽度：50.1%；
背景色：#d50000；
字体大小：12px；
线高：10px；
文本对齐：右；}
.进度条带条纹{
背景图像：-webkit线性渐变（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景图像：-o-线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景大小：40px 40px；}
.progress-bar-striped.active{
-webkit动画：进度条条纹2s线性无限；
-o-动画：进度条条纹2s线性无限；
动画：进度条2s线性无限；
}
@-webkit为进度条条纹设置关键帧{
从{背景位置：40px 0；}到{背景位置：0 0；}
@为进度条条纹设置关键帧{
从{背景位置：40px 0；}到{背景位置：0 0；}}

---

正如Rory McCrossan所说，我已经尝试将这两个元素作为一个元素，到目前为止，结果如下：

函数doit（）{
$（“#xp增加fx”）.css（“显示”、“内联块”）；
$（“#xp条填充”）.css（“框阴影”，“0px 0px 15px 06f，*/”-5px 0px 10px fff插图”）；
$（“#xp圆圈填充”）.css（“方框阴影”，/*“0px 0px 15px#06f，*/”-5px 0px 10px#fff插图”）；
setTimeout（函数（）{
$（“#xp bar fill”）.css（“-webkit transition”，“all 2s ease”）；
$（“#xp条填充”）.css（“宽度”，“80%”）；
$（“#xp圆圈填充”）.css（“-webkit过渡”，“所有0.34秒缓解”）.css（“宽度”，“100%”）；
},100);
setTimeout（函数（）{
美元（“#xp增加外汇”）。淡出（500）；
$（“#xp bar fill”）.css（{“-webkit transition:“所有0.5s轻松”，“框阴影”：“}）；
$（“#xp圆圈填充”）.css（{“-webkit转换”：“所有1轻松”，“方框阴影”：“}）；
},2000);
setTimeout（函数（）{
$（“#xp条填充”）.css（“宽度”，“0.1%”）；
setTimeout（function（）{$（“#xp circle fill”）.css（“宽度”，“0.1%”；}，200）；
},3000);
}

#xp小部件{
位置：绝对位置；
最高：20%；
宽度：310px；
左：50%；
转换：translateX（-50%）；}
#xp栏、#xp圈、#xp ol圈{
左：16px；
高度：10px；
宽度：92%；
背景:#035；
边界半径：5px；
溢出：隐藏；
显示：内联块；
垂直对齐：中间对齐；
位置：绝对；}
#xp圈{
顶部：-18px；
左：13px；
高度：50px；
宽度：50px；
边界半径：50%；}
#xp ol圈{
顶部：-9px；
左：21px；
高度：33像素；
宽度：33px；
边界半径：50%；}
#xp条形填充，#xp圆形填充{
身高：100%；
宽度：0.1%；
背景色：#d50000；
字体大小：12px；
线高：10px；
文本对齐：右；}
#xp圆形填充{宽度：0.1%；边界半径：50%；}
#xp增加外汇{
位置：相对位置；
显示：无；
高度：100%；}
.xp-increase-glow1{
位置：绝对位置；
保证金：0px 0px 0px-2px；
左：0px；
顶部：0px；
背景：#fff；
宽度：5px；
身高：100%；
边界半径：0px；
-webkit过滤器：模糊（2px）；}
.xp-increase-2{
位置：绝对位置；
保证金：-5px 0px 0px-2px；
左：0px；
顶部：0px；
背景：#aaf；
宽度：5px；
身高：200%；
边界半径：0px；
-webkit过滤器：模糊（10px）；}
.xp-increase-3{
位置：绝对位置；
保证金：0px 0px 0px-5px；
左：0px；
顶部：0px；
背景：#fff；
宽度：10px；
身高：100%；
边界半径：5px；
-webkit过滤器：模糊（5px）；}
.进度条带条纹{
背景图像：-webkit线性渐变（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景图像：-o-线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景图像：线性梯度（45度，rgba（255，255，255，0.15）25%，透明25%，透明50%，rgba（255，255，255，0.15）50%，rgba（255，255，255，0.15）75%，透明75%，透明）；
背景大小：40px 40px；}
.progress-bar-striped.active{
-webkit动画：进度条条纹2s线性无限；
-o-动画：进度条条纹2s线性无限；
动画：进度条条纹2s线性无限；}
麦克哈勒先生{
顶部：8px；
左：1px；
宽度：33px；
位置：绝对位置；
颜色：#ffffff；
文本阴影：-1px 0px黑色，1px 0px黑色，0px 1px黑色，0px-1px黑色，1px 1px黑色，2px 2px#000000；}
.debugTest{顶部：20%；位置：绝对；}
@-webkit为进度条条纹设置关键帧{
从{背景位置：40px 0；}到{背景位置：0 0；}
@为进度条条纹设置关键帧{
从{背景位置：40px 0；}到{背景位置：0 0；}}

7.
试试我正如Rory McCrossan所说，我已经尝试将这两个元素作为一个元素来执行，到目前为止，结果如下：


函数doit（）{
$（“#xp增加fx”）.css（“显示”、“内联块”）；
$（“#xp条填充”）.css（“框阴影，/*”