2

Bom dia, não sou nenhuma expert nisto e estou cansada de procurar uma solução para contrariar o skew dado ao container principal. Basicamente todas as soluções que até agora consegui compreender não resolvem.

Os elementos em cima da imagem consegui através de css fazer o transform skew contrário ao container principal e ficou tudo ok, mas não consigo fazer o mesmo à imagem de background que está a ser chamada no controlo (visto que esta não tem um caminho direto, tem uma relação com pastas à qual vai buscar essa imagem).

ASP.NET

divBedroomContainer.Attributes.Add("style", "background-image: url(" + trimmedFolder + trimmedBedroom + ".jpg)");

CSS

.Bedrooms {
    -webkit-backface-visibility: hidden;
    -webkit-transform: skewY(-2.7deg);
    transform: skewY(-2.7deg);
    outline: 1px solid transparent;
}
.BedroomContainer {
    float: left;
    width: 33.3334%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 400px;
    text-align: center;
    overflow: hidden;
}

inserir a descrição da imagem aqui

2
  • Olá MoJo bom dia, seja bem vindo ao StackOverflow. Poste o código css da parte que tem tido dificuldades, se eu puder ajudar concerteza ajudaderei, se não a outra que poderam ajudar você. Recomendo uma lida no tour para entender um pouco mais como funcionam as coisas por aqui.
    – Marconi
    15/05/2017 às 12:02
  • Olá Marconi, obrigada pela ajuda, irei consultar assim que puder. Já editei a pergunta, espera que esteja ok assim.
    – MoJo
    15/05/2017 às 12:14

1 Resposta 1

0

De acordo com uma solução que encontrei no Stack americano, você poderia usar a imagem de background em um pseudo-element e se apropriar do transform-origin para solucionar seu problema.

Não tenho acesso completo ao seu código, mas acho que você pode trabalhar em cima dessa ideia:

.Bedrooms {
    -webkit-backface-visibility: hidden;
    transform: skewY(-2.7deg);
    -ms-transform: skewY(-2.7deg);
    -webkit-transform: skewY(-2.7deg);
    outline: 1px solid transparent;

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

.Bedrooms::before {
    content: "";
    transform: skewX(2.7deg); 
    -ms-transform: skewX(2.7deg); /* IE 9 */
    -webkit-transform: skewX(2.7deg); /* Safari e Chrome */
    background-image: url('#suafoto'); 
    background-repeat: no-repeat; 
    background-position: top left; 

    position: absolute;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
    transform-origin: top left;
    width: 1000%; /* algo gigante */
    height: 1000%; /* algo gigante */
}

Boa sorte aí!

1
  • Muito obrigada. Vou experimentar... eu sou designer não sou developer, então ainda tenho alguma dificuldade em me fazer entender. Mas ando a dar os primeiros passos, vou falar com o developer daqui (que não conseguiu ainda ter tempo para ver uma solução) para ver se ele me ajuda com esta opção. Muito obrigada
    – MoJo
    16/05/2017 às 11:01

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .