Skew only top right corner

Question

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

enter image description here

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

This could be helpful: http://stackoverflow.com/questions/14714033/auto-resizing-skewed-background-in-css-images. And this fiddle also: http://jsfiddle.net/P5gLE/1/ — otinanai, Feb 13 '14 at 14:32
http://jsfiddle.net/M3SZ3/ (i prefer not to use rotation because its giving me problems with the full width) — , Feb 13 '14 at 14:39
@hambos22 I don't think you have many limitations here: http://jsfiddle.net/M3SZ3/2/ — otinanai, Feb 13 '14 at 14:42
see this also: http://jsfiddle.net/M3SZ3/4/. Made with linear gradient. Pseudo-skewed... peripou! :D — otinanai, Feb 13 '14 at 14:51

score 2 · Answer 1 · answered Apr 18 '16 at 15:01

2

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>

answered Apr 18 '16 at 15:01

dak

89
9

Hey thanks! I didn't know this library. Maybe I'll use it in the future – Apr 18 '16 at 16:59

score 1 · Answer 2 · answered Feb 13 '14 at 14:52

I recently created this for similar answer.

Here is my 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;
}

Skew only top right corner

2 Answers2

Linked