Css 只倾斜右上角

我正在尝试用css做一个形状。我只希望右上角倾斜。为了更好地理解这一点，这里有一幅我试图完成的图像

---

我尝试了

skewY

和

transform origin:top right

，但它没有给我想要的结果

我最近为类似的答案创建了这个

这是我的

.trapz2{
位置：绝对位置；
高度：50px；
宽度：500px；
背景色：红色；
}
.trapz2：之后{
位置：绝对位置；
顶部：-30px；
内容：“；
身高：0；
宽度：0px；
右边框：500px实心红色；
边框顶部：30px实心透明；
}

您只需使用slurve.js（slurvejs.com）就可以实现这一点。但是，如果您的需求严格来说是CSS，那么这种方法不适合您（使用JS+SVG，所以支持IE9+）。基本上，使用“数据倾斜”属性，可以为每个角点提供偏移值。因此，下面的示例将生成上面的图像

<div class="slurve" data-slurve="0,0 0,-15 0,0 0,0">
    Your Content Here
</div>

你的内容在这里

您可以分享您的试用代码吗？或者JSFIDLE？这可能会有帮助：。还有这把小提琴：（我不喜欢使用旋转，因为它会给我全宽带来问题）@hambos22我觉得你在这里没有太多限制：我会试试@otinaai s'wraios:）我没想到，嘿，谢谢！我不知道这个图书馆。也许我将来会用它

<div class="slurve" data-slurve="0,0 0,-15 0,0 0,0">
    Your Content Here
</div>