歪斜只在右上角

Question

我正在尝试用css制作一个形状。我只希望右上角倾斜。在这里更好地理解它是我想要完成的图像

我尝试使用skewY和transform-origin: top right，但它没有给我我想要的结果

Answer 1

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

这是我的pen

<div class="trapz2">
</div>

.trapz2{
  position:absolute;
  height:50px;
  width:500px;
  background-color:red;
}
.trapz2:after{
  position:absolute;
  top:-30px;
  content:"";
   height: 0; 
   width: 0px;
   border-right: 500px solid red;
   border-top: 30px solid transparent;
}

Answer 2

你可以简单地使用slurve.js（slurvejs.com）来实现这一点。但是如果你的要求是严格的CSS，那么这种方法对你来说并不适合（使用JS + SVG，所以支持IE9 +）。基本上，使用data-slurve属性，可以为每个角提供偏移值。因此，下面的示例将导致您的图像在上面。

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