Diese Frage hat hier bereits eine Antwort:

In CSS kann ich den Rand allein drehen, anstatt das gesamte Element zu drehen? etwas wie das

Ich möchte im Grunde genommen einen schrägen Rand für meinen Videoplayer erstellen.

Ich möchte so etwas wie die akzeptierte Antwort dieses Beitrags machen:Klick hie

Ausgenommen, anstatt die Ober- und Unterseite zu neigen, wird nur die rechte Seite geneigt.

Ich habe es versucht, aber es ist sowohl links als auch rechts geneigt:

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);
}