14

/ - / のようなプロフィール写真を表示しようとしています (スラッシュは、skewX を使用して傾斜を表し、ハイフンは、水平に配置された背景画像を表します)。

問題は、このコードも背景画像を歪めることです:

.photo {
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
}

...

<div class="photo"></div>

私はこのように背景の歪みを逆にしようとしました:

.photo {
transform: skewX(35deg); 
-ms-transform: skewX(35deg); /* IE 9 */
-webkit-transform: skewX(35deg); /* Safari and Chrome */
width: 100px; 
height: 92px; 
border-right: 1px solid black; 
border-left: 1px solid black; 
}

.photo div {
transform: skewX(-35deg); 
-ms-transform: skewX(-35deg); /* IE 9 */
-webkit-transform: skewX(-35deg); /* Safari and Chrome */
width: 100%; 
height: 100%; 
background-image: url('silhouette.png'); 
background-repeat: no-repeat; 
background-position: top left; 
}

...

<div class="photo"><div></div></div>

...しかし、/ [-] / (背景が斜めに収まりません) になります。

私は一日中これにいました、助けてください。コーダーズ・ボックを手に入れた！

4

1 に答える 1

10

背景画像を保持している疑似要素を使用したいと思います。ソリューションの鍵は、次を使用することですtransform-origin。

Example

.photo {
    transform: skewX(35deg); 
    -ms-transform: skewX(35deg); /* IE 9 */
    -webkit-transform: skewX(35deg); /* Safari and Chrome */
    width: 100px; 
    height: 92px; 
    border-right: 1px solid black; 
    border-left: 1px solid black; 

    /* new styles */
    position: relative;
    overflow: hidden;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
}

.photo::before {
    content: "";
    transform: skewX(-35deg); 
    -ms-transform: skewX(-35deg); /* IE 9 */
    -webkit-transform: skewX(-35deg); /* Safari and Chrome */
    background-image: url('http://placekitten.com/200/200'); 
    background-repeat: no-repeat; 
    background-position: top left; 

    /* new styles */
    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1000%; /* something ridiculously big */
    height: 1000%; /* something ridiculously big */
}
于 2013-08-17T14:24:45.327 に答える