To pytanie ma już odpowiedź tutaj:

In css mogę obrócić ramkę sam, zamiast obracać cały element? coś takiego

Zasadniczo chcę utworzyć ukośne obramowanie mojego odtwarzacza wideo.

Chcę zrobić coś w rodzaju akceptowanej odpowiedzi tego postu:Kliknij tuta

z wyjątkiem tego, że zamiast pochylania góry i dołu pochyla tylko prawą stronę.

Próbowałem tego, ale pochyla zarówno lewą, jak i prawą stronę:

html:

<div class="skew-neg">
    <p>Hello World.</p>
    <p>My name is Jonathan.</p>
    <p>This box is skewed.</p>
    <p>In supported browsers.</p>
</div>​

css:

html { 
    background: #FFF;
    color: lightblue;
    font: 16px 'Arial';
    line-height: 150%;
}

div {
    background: blue;
    margin: 50px auto 0;
    padding: 20px;
    width: 200px;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(0,0,0,.9);
    border-radius: 25px;
}

.skew-neg {
    -webkit-transform: skewX(-50deg);
    -moz-transform: skewX(-50deg);
    -ms-transform: skewX(-50deg);
    -o-transform: skewX(-50deg);
    transform: skewX(-50deg);
}

.skew-neg > * {
    -webkit-transform: skewX(50deg);
    -moz-transform: skewX(50deg);
    -ms-transform: skewX(50deg);
    -o-transform: skewX(50deg);
    transform: skewX(50deg);
}