偏斜只有右上角 [英] Skew only top right corner

问题描述

我想用css做一个形状。我想只有右上角歪斜。要更好地理解这里是一个我想要完成的图片

I'm trying to make a shape with css. I want only the top right corner to skew. To understand it better here is an image from what i'm trying to accomplish

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

I tried with skewY and transform-origin: top right but it didn't give me the result I wanted

推荐答案

可以实现这个真正简单地使用slurve.js（slurvejs.com）。但是如果你的要求是严格的CSS，那么这种方法不适合你（使用JS + SVG所以IE9 +支持）。基本上，使用data-slurve属性，为每个角提供一个偏移值。

You can achieve this really simply using slurve.js (slurvejs.com). But if your requirement is strictly CSS, then this approach isn't for you (uses JS + SVG so IE9+ supported). Basically, using a data-slurve attribute, you provide an offset value for each corner. So the example below would result in your image above.

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

这篇关于偏斜只有右上角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！