Скос только верхний правый угол

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>