Como desalojo a imagem de fundo na camada distorcida (CSS)?
Estou tentando exibir uma foto de perfil como esta / - / (as barras representam inclinações usando skewX, o hífen representa uma imagem de fundo alinhada horizontalmente).
O problema é que esse código também distorce a imagem de fundo:
.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>
Eu tentei inverter o fundo assim:
.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>
... mas eu recebo / [-] / (o plano de fundo não se ajusta ao flush).
Eu estive nisso o dia todo, por favor, você pode me ajudar? Eu tenho o bock do codificador!