19

下の画像の緑色のチェックマークで示されているように、div の背景の 1 つの角を歪めようとしています。

ここに画像の説明を入力

ただし、CSS3 ではそれを達成することはできません。完全に歪ませると隅々まで歪んでしまいます。右下隅を左に傾けて (たとえば 25px)、パースペクティブを維持したいだけです (上の画像に示すように)。

 background-image: url('http://rtjansen.nl/images/stackoverflow.png');
-webkit-transform: skew(-45deg);

フィドル: http://jsfiddle.net/3eX5j/

私のコードは次のとおりです。

div {    
    width: 300px;
    height:80px;
    margin-left:40px;
    background-image: url('http://rtjansen.nl/images/stackoverflow.png');
    -webkit-transform: skew(-45deg);
}
4

1 に答える 1